Enabling and Disabling Radio Buttons Depending on User Selection

Question

I'm looking to write jQuery to only enable radio buttons depending on which radio buttons are currently selected in accordance with some business logic.

Essentially there are 3 groups of 3 radio buttons, which end up looking something like (my apologies for being verbose with this example HTML, but hoping this will show what I mean):

<p>
  <label for="group_one">Group One</label>
</p>
<p>
  <div class="group_one">
    <div id="group_one_choice_one">
      <label for="group_one_choice_one">Choice One</label>
      <br />
      <input checked="checked" id="choice_one" type="radio" value="1" />
      <br />
    </div>
    <div id="group_one_choice_two">
      <label for="group_one_choice_two">Choice Two</label>
      <br />
      <input id="group_one_choice_two" type="radio" value="2" />
      <br />
    </div>
    <div id="group_one_choice_three">
      <label for="group_one_choice_three">Choice Three</label>
      <br />
      <input id="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_two">Group Two</label>
</p>
<p>
  <div class="group_two">
    <div id="group_two_choice_one">
      <label for="group_two_choice_one">Choice One</label>
      <br />
      <input checked="checked" id="choice_one" type="radio" value="1" />
      <br />
    </div>
    <div id="group_two_choice_two">
      <label for="group_two_choice_two">Choice Two</label>
      <br />
      <input id="group_two_choice_two" type="radio" value="2" />
      <br />
    </div>
    <div id="group_two_choice_three">
      <label for="group_two_choice_three">Choice Three</label>
      <br />
      <input id="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>
<p>
  <label for="group_three">Group Three</label>
</p>
<p>
  <div class="group_three">
    <div id="group_three_choice_one">
      <label for="group_three_choice_one">Choice One</label>
      <br />
      <input checked="checked" id="choice_one" type="radio" value="1" />
      <br />
    </div>
    <div id="group_three_choice_two">
      <label for="group_three_choice_two">Choice Two</label>
      <br />
      <input id="group_three_choice_two" type="radio" value="2" />
      <br />
    </div>
    <div id="group_three_choice_three">
      <label for="group_three_choice_three">Choice Three</label>
      <br />
      <input id="choice_three" type="radio" value="3"/ >
      <br />
    </div>
  </div>
</p>

Where it gets tricky is the logic needed to determine which radio buttons to display and which to enable. A user must select one choice from each group, but cannot repeat the same choice from one group to another.

Ideally when the user gets to the page, all of the radio buttons would be available but unselected.

If the user were to first select (for example) Choice Two in Group Three, the script should then disable Choice Two in both Group One and Group Two. If the user then selects Choice Three in Group Two, it should then only enable Choice One in Group One, and so on.

Any help would be very, very much appreciated. I would post the jQuery I've been attempting to write to solve this problem but I don't think I've been going about this very well and would love any help working through it. Thanks!

Answer 1

I'd skip the special classes.

$("input[type=radio]").click(function() { 
  $("input[type=radio][value=" + $(this).val() + "]").attr("disabled", "disabled"); 
  $(this).removeAttr("disabled"); 
});

Depending on your requirements you might not need the last line - it just re-enables the current radio. Your html is also missing names for your radio buttons.