动态禁用＆amp;启用单选按钮

Question

我正在创建一个简单的DISC配置文件测试，其中每个问题都有8个单选按钮，如果我选中Great“M”单选按钮，Great“L”单选按钮将被禁用且无法选择，您必须选择其他像Overpowered，Kind或Brave。表格看起来像这样，

我正在尝试使用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");
        });
    });
});

但是，如果我检查Great“M”单选按钮，稍后我将其更改为Overpowered，大“L”单选按钮仍然禁用，如果我更改“L”，则使用其他“L”按钮按钮之后，“M”仍然被禁用，看起来像这样，

我想得到的结果是，如果我选择M for Kind，我不能选择L for Kind。有帮助吗？抱歉英语不好。 ：）

Answer 1

创建两组按钮（即按钮具有相同的name属性），默认行为是每次只能检查每组中的一个按钮。

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

要禁止将同一属性标记为L和M，您可以使用以下脚本：

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

FIDDLE

Answer 2

作为对你问题的回答，我只是尝试了这个小提琴：http://jsfiddle.net/KXbEE/

使用的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>

和这个jQuery：

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

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

检查一下这是否对你有帮助。