CODEWITHSUNDEEP
jquery
Richard77
Richard77

Reputation: 21621

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

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

Upvotes: 1

Views: 7076

Answers (4)

Abhijeet
Abhijeet

Reputation: 8771

Enabling and disabling sections/div's based on Selection.
/**Sample function to disable and enable sections**/
function onChnageFunction(strSelect) {
if( strSelect == "CP")
{
$('#field1Name').removeAttr('disabled');
$('#field2Name').removeAttr('disabled');
}
else
{
//Defaulting before disabling
$('#field1Name').val("0");
$('#field2Name').val("0");
$('#field1Name').attr('disabled', 'disabled');
$('#field2Name').attr('disabled', 'disabled');
}
}

/*On change attachment*/
$(document).on('change', '[name="selectComponentname"]', function () {
var strSelect = $(this).val();
/*calling helper for logic implementation*/
onChnageFunction(strSelect);
});

/*On load attachment*/
$(document).ready(function() {
var strSelect = $("#selectComponentname").val();
//calling helper for logic implementation
onChnageFunction(strSelect);    
});

Upvotes: 1

Richard77
Richard77

Reputation: 21621

@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.

Upvotes: 0

Ender
Ender

Reputation: 15221

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();
});

Upvotes: 4

James Curran
James Curran

Reputation: 103505

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

Upvotes: 1

Related Questions