JQuery.css(“display”) = “block” not working

I wanted to show and hide my TextBox based on value selected in RadiobuttonList. I wrote the following code for that

$("#<%= rbtnIsPFEnabled.ClientID %>").click(function () {
                pfno = $("#<%= txtPFNo.ClientID %>");
                if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val() == "Yes") {
                    pfno.css("dispay") = "block";
                }
                else
                    pfno.css("dispay") = "none";
            });

Though I had achieved my task by using JQuery.show() and JQuery.hide() but was not satisfied as I wanted to know why first approach failed. Second is I used $("#<%= rbtnIsPFEnabled.ClientID %>") in above code, can I reduce it to one by using something else second time like this or anything else?

I tried $(this+" input:checked").val() and $(this.toString()+" input:checked").val() but it did not work, so I had to repeat it.

Answer

$("#id").css("display", "none");
$("#id").css("display", "block");

if Your pfno contains your ID

then this should work

$(pfno).css("display", "none");
$(pfno).css("display", "block");

You Should Use FireBug For Debugging

EDIT:

<script type="text/javascript">
    function fun(obj) {

        if ($("#<%= rbtnIsPFEnabled.ClientID %> input:checked").val()=='Yes') {
            $("#<%= txtPFNo.ClientID %>").css("display", "block");
        }
        else {
            $("#<%= txtPFNo.ClientID %>").css("display", "none");
        }
    }


</script>  

<asp:RadioButtonList   ID="rbtnIsPFEnabled"     runat="server" >
    <asp:ListItem Text="Yes" Value="Yes" onchange="fun(this);"> </asp:ListItem>
    <asp:ListItem Text="No" Value="No" onchange="fun(this);"> </asp:ListItem>
    </asp:RadioButtonList>

    <asp:TextBox runat="server" ID="txtPFNo"/>

Advertisement

Answer