动态禁用和启用单选按钮

Question

我正在创建一个简单的 DISC 配置文件测试，其中每个问题都有 8 个单选按钮，如果我选中大“M”单选按钮，大“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，Great "L" 单选按钮仍然禁用，如果我更改 "L"，其他 "L" 按钮也是如此按钮之后，“M”仍然被禁用，看起来像这样，

我想要得到的结果是，如果我选择 M 作为 Kind 我不能选择 L 作为 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");
    });
});

看看这是否对你有帮助。