单击后禁用单选按钮

Question

I have some forms with some radio buttons elements. I want to disable just one of the radios buttons (those named 'option 1') once a button is selected. This is the HTML:

<h2>Option 1</h2>
<form>
  <input type="radio" name="option 1" value="A" />Value A
  <input type="radio" name="option 1" value="B" />Value B
</form>

<h2>Option 2</h2>
<form>
  <input type="radio" name="option 2" value="C" />Value C
  <input type="radio" name="option 2" value="D" />Value D
</form>

And I'm using this code:

$(":radio").click(function() {
  var radioName = "option 1"; 
  $(":radio[name='" + radioName + "']:not(:checked)").attr("disabled", true); 
});

It works... but if a radio button 'option 2' is selected first then the 'option 1' radio buttons are disabled (they should remain enabled until clicked). How can I prevent this behavior?

Thanks

Answer 1

You are attaching the event to all radio buttons, but you should attach the event just to the ones that will disable themselves. Check my snippet.

 $('input[type="radio"][name="option 1"]').click(function() { var radioName = "option 1"; $('input[name="' + radioName + '"]:not(:checked)').attr("disabled", true); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <h2>Option 1</h2> <form> <input type="radio" name="option 1" value="A" />Value A <input type="radio" name="option 1" value="B" />Value B </form> <h2>Option 2</h2> <form> <input type="radio" name="option 2" value="C" />Value C <input type="radio" name="option 2" value="D" />Value D </form> 

Answer 2

In your jQuery function you select all the radio buttons but what you want is to target only the radio button named option 1 so update you code like this:

$(":radio[name='option 1']").click(function() {
  var radioName = "option 1"; 
  $(":radio[name='" + radioName + "']:not(:checked)").attr("disabled", true); 
});