jQuery-选中时禁用重复的复选框 [英] JQuery - disable duplicate checkboxes when checked

问题描述

我有一个复选框列表，分为几部分. 这些复选框中的某些可以出现在多个部分中. 我想做的是通过禁用所有与用户选择复选框相同的复选框来阻止用户在一个以上的区域中选择相同的复选框. 但是，一定不能禁用他们选择的复选框，以便他们可以取消选中它(这还必须重新启用所有禁用的复选框，以便他们愿意的话可以在另一部分中自由选择它)

I have a list of checkboxes grouped into sections. Some of these checkboxes can appear in more than one section. What I would like to do is stop the user from selecting the same checkbox in more than one section by disabling all checkboxes which are the same when the user selects a checkbox. However the checkbox they selected must not be disabled so they can uncheck it (this must also re-enable all the disabled checkboxes so they are free to select it in another section if they wish)

有人知道在JQuery中执行此操作的最佳方法吗?

Does anyone know the best way of doing this in 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，但名称相同.

as you can see option 1 appears in both section 1 and 2. They each have different id's but the name is the same.

我希望通过复选框进行操作，因为用户可能没有意识到他们已经在不同的部分中选择了相同的选项，但是如果禁用了复选框，他们会知道他们已经选择了它，并且是否想更改其选项.选择，他们将不得不在物理上取消选中它.

I would prefer to do it via checkboxes as the user might not realise that they has selected the same option in a different section whereas if the checkbox was disabled they would know that they had already selected it and if they wanted to change their choice they would have to physically uncheck it.

推荐答案

我不会禁用复选框，我只会将它们绑定在一起，因此它们会像这样进行更改:

I wouldn't disable the checkboxes, I would just bind them together, so they change all like this:

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

工作示例

更新:要禁用其他复选框，请执行以下操作:

Update: To disable other checkboxes:

$('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:也将相应的标签涂成灰色:

Update 2: To grey out the corresponding labels too:

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

工作示例

这篇关于jQuery-选中时禁用重复的复选框的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！