How to enable/disable a certain textbox depending on which radiobutton was checked?

Question

Hello,

I've 3 radiobuttons and a textbox next to each other (also 3 text boxes) like this:

<input type = "radio" id = "myRadio" value = "A" checked = "checked"/>
<input type = "text" id = "myText1"/> <br/>

<input type = "radio" id = "myRadio" value = "B" />
<input type = "text" id = "myText2"/><br/>

<input type = "radio" id = "myRadio" value = "C" />
<input type = "text" id = "myText2"/>

The first radioButton is checked by default, and the textbox next to it should be enabled. the 2 other radiobuttons are not checked, and the textbox next to them should be disabled.

I need a Jquery script so that:

1. when a radiobutton is checked, the textbox next to it should be enabled
2. the textboxes next to the radiobutton unchecked remain disabled

In other words, only the textbox next to a radiobutton that's checked is enabled.

Personally, I have difficult writing the script because all the radiobutton have the same id.

I've tried this, but I'm getting all 2 radiobuttons checked at the same time while only the first textbox remains enabled.

$(":text").attr("disabled", "disabled");
if($(":radio").attr("checked"))
{
  $(":radio:checked + :text").removeAttr("disabled", "disabled");
};

EDIT

Look at the code above. When the page loads for the first time, the first radiobutton (whose value = "A") is checked, so the textbox next to it (whose id = "myText1") should be enabled. When user clicks a different radiobutton, for instance the one with a value = "B", the textbox next to it (whose id = "myText2") should be enabled, and so on.

I hope I have been more explicit this time.

By the way, I'm using ASP.NET MVC.

Thanks for helping

Answer 1

$("input[type='radio']).checked(function()
   {
       $("input[type='text']").disable();
       $(this).next().enabled();
   });

This will require a plugin which handles enable/disable (which for some odd reason is not in the core jQuery libray), of which there are many and easy to google.

Answer 2

You shouldn't need a plug-in for this. Adapting from James' code, the following should work (and will correctly disable boxes on load):

$(function() {
    $('input[type=radio]').change(function()
       {
           if ($(this).is(':checked')) {
               $('input[type=text]').attr('disabled', 'disabled');
               $(this).next().removeAttr('disabled');
           }
       });

    $('input[type=radio]:first').attr('checked', 'checked').change();
});

Answer 3

@Ender,

I edited the last 2 lines of the code you provided and evrything is working now as I wanted.

$('input[type=text]').attr("disabled", "disabled");
$('input[type=radio]:checked').next().removeAttr("disabled", "disabled");

The last line takes into account the primary initial state of the radiobutton then enables accordingly the textbox next to it.

Thanks a lot.