2

我正在创建一个简单的 DISC 配置文件测试，其中每个问题都有 8 个单选按钮，如果我选中 Great "M" 单选按钮，Great "L" 单选按钮将被禁用并且无法选择，您必须选择其他类似强大，善良或勇敢。表格看起来像这样，

在此处输入图像描述

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

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

在此处输入图像描述

我想要得到的结果是，如果我选择 M 作为 Kind 我不能选择 L 作为 Kind。有什么帮助吗？抱歉英语不好。:)

4

2 回答 2

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");
         }
);

小提琴

于 2013-01-19T11:25:33.497 回答
0

好吧，作为对您问题的回答，我刚刚尝试了这个小提琴：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");
    });
});

看看这是否对您有帮助。

于 2013-01-19T11:44:12.723 回答