asked on

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

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>

David S.

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

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

searchsanjaysharma

ASKER

I dont want to play show hide, i want to enable disable panel and not div

leakim971

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

searchsanjaysharma

ASKER