JQuery.css（“display”）=“block”无法正常工作

Question

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 1

$("#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"/>

Answer 2

You can resolve this issue in multiple way using jQuery . eg

$(pfno).css("display", "none"); //used when you are defining single css property or in chaining method
$(pfno).css({"display":"none"}); // used when you are defining multiple CSS property           
$(pfno).hide(); //show/hide function also perform display block/none functionality which is mostly used in script

Answer 3

ok first of all this is not correct :

     pfno.css("dispay") = "block";

above will never work

pfno.css({ 'display' : 'block' }); is how you set a css property ,

pfno.css( 'display' , 'block' ); is another way to set a css property , so that measn yuo are doing something else wrong.. you need to set an alert or write to the console to confirm that your if statement and your click handler are working