Share via

How to disable a specific radio button, on a page, and allow other radio button to be selected?

  • Article
  • 04/11/2014

Question

Friday, April 11, 2014 10:47 PM

Hi,

I'm working on a MVC3 app, using razor view. On 1 page, orginally there is only 1 radio button, and it's disabled - this was working fine. Here is the code I have:

$('input:radio').prop('disbled', true);

Now, I need to add another radio button to this page, and allow the user to select the 2nd radio button, and still keep the 1st radio button disabled.

So, I added a class "newClass"  to the 1st radio button, and changed the above line of code to be:

$('input:radio .newClass').prop('disbled', true);

However, this does not work - now, the 1st radio button is showing as enabled; and the user can select it.

How do I make this work?

Thanks,

Claudia

All replies (5)

Friday, April 11, 2014 11:28 PM ✅Answered

claudia888

$('input:radio .newClass').prop('disbled', true);

You need a slight modification in your code. when you use class selector then Just use the class name. like given below

$(".newClass").attr('disabled',true);

Complete Sample Code:

<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  <meta charset="utf-8">

    <script>
    $( document ).ready(function() {
 $(".newClass").attr('disabled',true);
});
  </script>
</head>

<body>
  Disabled RadioButton
 <input id="Radiobutton1" type="radio" class="newClass"  value="Radiobutton1" name="rdobtn"/>Radiobutton1<br/>
  Enabled RadioButtons
    <input id="Radiobutton2" type="radio"  value="Radiobutton2" name="rdobtn"/>Radiobutton2
  
   <input id="Radiobutton3" type="radio"  value="Radiobutton3" name="rdobtn"/>Radiobutton3
</body>
</html>

Friday, April 11, 2014 11:44 PM ✅Answered

You just need to remove the space from between the input:radio and the .newClass like so:

$('input:radio.newClass').prop('disbled', true);

The space meant it was trying to look for an element with a class of newClass that had a parent element that was an input:radio

The more things you use to specify an element the more you just chain them together, so if you wanted a radio button with the class "newClass" and also the classes "first" and "userChoice" you would write:

$('input:radio.newClass.first.userChoice')

Friday, April 11, 2014 11:25 PM

Hi  Claudia,

you can simply keep 1st radio button as:

$("#radioButton1").attr('disabled', true);

and 2nd radio button as:

$("#radioButton2").attr('disabled', false);

in your project.

Saturday, April 12, 2014 12:27 AM

Thanks A2H. It worked!

Saturday, April 12, 2014 12:30 AM

Thanks Russ. Your suggestion worked as well.

Plus - thanks for the explanation!