How to enable disable textbox with radio button in following code.

searchsanjaysharma
searchsanjaysharma used Ask the Experts™
on
I want to enable the textbox if either r1 or r2 is clicked else it should remain disabed

<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')) {
                $('#t1').attr("disabled", false);
            }
            else
            {
                $('#t1').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:TextBox ID="t1" runat="server" Enabled="false"></asp:TextBox>

    </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 exactly 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 ($)
    {
        $("input[name=r]").click(function ()
        {
            if ($('#r1').is(':checked')) {
                $('#t1').attr("disabled", false);
            }
            else
            {
                $('#t1').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')) {
                $('#t1container').show();
            }
            else 
            {
                $('#t1container').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="t1container" style="display:none">
    <asp:TextBox ID="t1" runat="server" Enabled="false"></asp:TextBox>
</div>
    </div>
    </form>
</body>
</html>

Open in new window

Michel PlungjanIT Expert
Top Expert 2009
Commented:
Just for future

$("input[name=r]").click(function () {
  if ($('#r1').is(':checked')) {
    $('#t1').attr("disabled", false);
  }
  else {
    $('#t1').attr("disabled", true);
  }
});

can be written

$("input[name=r]").click(function () {
  var chkd = $('#r1').is(':checked');
  $('#t1').attr("disabled", !chkd);
});

Author

Commented:
ok
Michel PlungjanIT Expert
Top Expert 2009

Commented:
Why the "B" ?

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial