JQuery - 当复选框被选中时禁用重复的复选框

Question

JQuery - 当复选框被选中时禁用重复的复选框

5

我有一份复选框列表，分组排列。其中一些复选框可能出现在多个分组中。我想要做的是，当用户选择某个复选框时，禁用所有与所选复选框相同的复选框，以防止用户在其他分组中再次选择它。但是所选的复选框必须保持可用，以便用户可以取消选择它（同时这也会重新启用所有被禁用的复选框，使它们可以在其他分组中自由选择）。

请问有没有人知道在 JQuery 中实现这个功能的最佳方法？

示例代码：

<h3>Section 1</h3>
<ul>
    <li>
        <label for="section1_method_1">
            <input name="method_1" value="43" id="section1_method_1" type="checkbox">Option 1
        </label>
    </li>
    <li>
        <label for="section1_method_2">
            <input name="method_2" value="2" id="section1_method_2" type="checkbox">Option 2
        </label>
    </li>
    <li>
        <label for="section1_method_5">
            <input name="method_5" value="6" id="section1_method_5" type="checkbox">Option 5
        </label>
    </li>
</ul>

<h3>Section 2</h3>
<ul>
    <li>
        <label for="section2_method_0">
            <input name="method_0" value="5" id="section2_method_0" type="checkbox">Option 0
        </label>
    </li>
    <li>
        <label for="section2_method_1">
            <input name="method_1" value="143" id="section2_method_1" type="checkbox">Option 1
        </label>
    </li>
</ul>

正如您所看到的，选项1出现在第1节和第2节中。它们各自具有不同的ID，但名称相同。

我更喜欢通过复选框来完成，因为用户可能没有意识到他们已经在不同的部分选择了相同的选项，而如果复选框被禁用，他们会知道他们已经选择了它，如果他们想要改变他们的选择，他们必须物理上取消选择它。

- John

1

我在想你的表单是否需要复选框？单选按钮呢？请提供一个代码示例和表单的截图。 - Stefanvds

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- jigfox · Accepted Answer

我不会禁用这些复选框，我只会将它们绑定在一起，以便它们同时更改，如下所示:

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    checked = $(this).attr('checked');
    // this will set all the checkboxes with the same name to the same status
    $('input[type=checkbox][name='+name+']').attr('checked',checked);
});

实际演示

更新：禁用其他复选框：

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    id = $(this).attr('id');
    checked = $(this).attr('checked');
    // disable all checkboxes except itself
    $('input[type=checkbox][name='+name+']:not(#'+id+')')
        .attr('disabled',checked);
});

演示实例

更新2：将相应的标签变灰：

$('input[type=checkbox]').change(function(){
    name = $(this).attr('name');
    id = $(this).attr('id');
    checked = $(this).attr('checked');
    $('input[type=checkbox][name='+name+']:not(#'+id+')')
        .attr('disabled',checked)
        .each(function(){
            lid = $(this).attr('id'); // the id of the current disabled box
            if (checked) {
                $('label[for='+lid+']').addClass('disabled');
            } else {
                $('label[for='+lid+']').removeClass('disabled');
            }
        });
});

还有一些CSS：

.disabled {
    color: #888;
}

working example