Dynamically disabling & enabling radio buttons

Question

I'm creating a simple DISC profile test, where in each question have 8 radio button where if I check the Great "M" radio button, the Great "L" radio button will be disabled and cannot be selected and you must choose other like Overpowered, Kind, or Brave. The form looks like this,

I'm trying with jQuery,

    $(document).ready(function(e) {
    var Form = $("[name=DISC]");

    Form.find("input.Most").each(function() {
        $(this).change(function() {
            $(this).next().attr("disabled", "disabled");
            $(this).prev().attr("disabled");
        });
    });

    Form.find("input.Least").each(function() {
        $(this).change(function() {
            $(this).prev().attr("disabled","disabled");
            $(this).next().attr("disabled");
        });
    });
});

But, if I check the Great "M" radio button, and later I change it into Overpowered the Great "L" radio button still disabled, and so with the other "L" buttons, if I change the "L" button later, the the "M" is still disabled, looks like this,

The results I want to get is, If I choose M for Kind I cannot choose L for Kind. Any help? Sorry for bad English. :)

Answer 1

Create two groups of buttons (i.e give the buttons the same name attribute) and the default behaviour would be that only one button from each group can be checked at a time.

<div class="lgroup">
 <input type="radio" name="Lgroup" value="1"> //great
 <input type="radio" name="Lgroup" value="2"> //overpowered
 <input type="radio" name="Lgroup" value="3"> // kind 
 <input type="radio" name="Lgroup" value="4"> //brave  
</div>
<div class="mgroup">
 <input type="radio" name="Mgroup" value="1"> //great
 <input type="radio" name="Mgroup" value="2"> //overpowered
 <input type="radio" name="Mgroup" value="3"> //kind
 <input type="radio" name="Mgroup" value="4"> //brave
</div>

To forbid the same attribute being marked as L and M, you can use the following script:

$("input").change(
    function(){
      i= $(this).index();
       sibling =  $(this)
        .parent()
        .siblings()
        .find("input")
        .eq(i);
     if (sibling.is(":checked")) 
         $(this).removeAttr("checked");
         }
);

FIDDLE

Answer 2

Well as a answer to your question i just tried this fiddle: http://jsfiddle.net/KXbEE/

Used Html:

<form name='DISC' method='post'>
  <table>
    <tbody>
        <tr>
            <td>
                <input type='radio' name='' value='' />
                <input type='radio' name='' value='' />
            </td>
            <td>Great</td>
        </tr>
        <tr>
            <td>
                <input type='radio' name='' value='' />
                <input type='radio' name='' value='' />
            </td>
            <td>Overpowered</td>
        </tr>
        <tr>
            <td>
                <input type='radio' name='' value='' />
                <input type='radio' name='' value='' />
            </td>
            <td>Kind</td>
        </tr>
        <tr>
            <td>
                <input type='radio' name='' value='' />
                <input type='radio' name='' value='' />
            </td>
            <td>Brave</td>
        </tr>
    </tbody>
  </table>
</form>

and this jQuery:

var Form = $("form[name='DISC']");

Form.find(":radio").each(function () {
    $(this).change(function () {
        $(this).siblings(':radio').attr("disabled", "disabled");
    });
});

check this out if this helps you.