JQuery.css("display") = "block" not working

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.

Dgan · Accepted Answer · 2014-12-18T05:50:55.190

4

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

edited Dec 18 '14 at 05:50

answered Dec 18 '14 at 05:27

Dgan

10,077
1
29
51

You read the full question? `"also tried second solution by replacing pfno.css("dispay") = "block" to pfno.css("dispay","block") but both could not work"` – Bharadwaj Dec 18 '14 at 05:28
no - pfno would not be written like that , you would just do pfno.css() – Scott Selby Dec 18 '14 at 05:30
http://stackoverflow.com/questions/3582619/how-to-change-css-display-none-or-block-property-using-jquery – 4dgaurav Dec 18 '14 at 05:31
1

@4dgaurav - good catch , I can't believe someone needed to copy another answer to explain how to set a css property with jquery – Scott Selby Dec 18 '14 at 05:38
Its an alternative solution, and do not address my second question. So, +1, but not an answer. – Imad Dec 18 '14 at 07:12

score 0 · Answer 2 · edited Jul 21 '15 at 02:33

0

You can resolve this issue in multiple way using jQuery. e.g.

$(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

edited Jul 21 '15 at 02:33

VK Da NINJA

510
7
19

answered Dec 18 '14 at 06:32

Gourav Makhija

710
7
16

Scott Selby · Answer 3 · 2014-12-18T05:35:53.913

-1

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

edited Dec 18 '14 at 05:35

answered Dec 18 '14 at 05:27

Scott Selby

9,420
12
57
96

I want to get selected value and not checking anything like your code. – Imad Dec 18 '14 at 05:31
oohh... I see.. you are using radio buttons , and checking the value of the one that is checked.... sorry about that – Scott Selby Dec 18 '14 at 05:33

JQuery.css("display") = "block" not working

3 Answers3