Question

我有一个按部分分组的复选框列表。其中一些复选框可以出现在多个部分中。我想要做的是通过禁用用户选中复选框时所有相同的复选框，阻止用户在多个部分中选中相同的复选框。但是，他们选择的复选框不能被禁用，因此他们可以取消选中它（这也必须重新启用所有禁用的复选框，以便他们可以在其他部分中自由选择它，如果他们愿意的话）

有没有人知道在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，但名称相同。

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

Answer 1

我不会禁用复选框，我只是将它们绑定在一起，所以它们会像这样改变：

$('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);
});

working example

更新：要禁用其他复选框：

$('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);
});

working example

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

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

1 个答案: