We help IT Professionals succeed at work.

How to enable disable panel p1 on click of radio button in jquery

searchsanjaysharma
searchsanjaysharma used Ask the Experts™
on
Kindly correct the following code
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script language="javascript">
    $(document).ready(function ($)
    {
        $("input[ID='r1']").click(function ()
        {
            if ($(this).is(':checked')) {
                $('#p1').attr("disabled", false);
            }
            else
            {
                $('#p1').attr("disabled", true);
            }
        });
    });
 </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <asp:RadioButton ID="r1" runat="server" Text="Male" groupname="r"/>
    <asp:RadioButton ID="r2" runat="server" Text="Female" GroupName="r" />
    <asp:Panel ID="p1" runat="server" Enabled ="false">
    </asp:Panel>

    </div>
    </form>
</body>
</html>
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
David S.Consultant & Challenge Subduer
Top Expert 2009

Commented:
I don't know ASP, so I don't know what HTML is being generated there, but it looks like you need to attach the event handler to both radio buttons and modify it to check which one is checked based on the ID instead of the "this" keyword.

    $(document).ready(function ($)
    {
        $("#r1, #r2").click(function ()
        {
            if ($('#r1').is(':checked')) {
                $('#p1').attr("disabled", false);
            }
            else
            {
                $('#p1').attr("disabled", true);
            }
        });
    });

Open in new window

By the way, the "language" attribute is obsolete. Use the "type" attribute instead:
<script type="text/javascript">

Open in new window

Multitechnician
Top Expert 2014
Commented:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.0/jquery.min.js"></script>
<script language="javascript">
    $(document).ready(function ($) 
    {
        $("input[ID='r1']").click(function () 
        {
            if ($(this).is(':checked')) {
                $('#p1container').show();
            }
            else 
            {
                $('#p1container').hide();
            }
        });
    });
 </script>
</head>

<body>
    <form id="form1" runat="server">
    <div>
    <asp:RadioButton ID="r1" runat="server" Text="Male" groupname="r"/>
    <asp:RadioButton ID="r2" runat="server" Text="Female" GroupName="r" />
<div id="p1container" style="display:none">
    <asp:Panel ID="p1" runat="server" >
    </asp:Panel>
</div>
    </div>
    </form>
</body>
</html>

Open in new window

Author

Commented:
I dont want to play show hide, i want to enable disable panel and not div
leakim971Multitechnician
Top Expert 2014

Commented:
when you're using Enabled ="false" .net don't generate the corresponding HTML in the page. Do you understand that? Please confirm.

if you don't want to generate the content go to corresponding ajax controls

Author

Commented:
ok