jQuery 基于复选框选择启用/禁用复选框

Posted 2023-02-24

【中文标题】jQuery 基于复选框选择启用/禁用复选框

【英文标题】：jQuery enable/disable checkbox based on checkbox selection

【发布时间】：2013-11-17 09:16:16

【问题描述】：

编辑：我应该解释说，根据用户从第一组中选择的内容，第二组复选框只有一些启用 - 如果用户选择第一个复选框，那么第二个复选框第二组启用，而如果他们选择第一组中的第二个框，则启用第二组中的另一组复选框。抱歉，应该解释得更清楚。

我有两个系列的复选框如下：

<input class="oDiv" type="checkbox" value="1" />
<input class="oDiv" type="checkbox" value="2" />

<input disabled="disabled" class="Spec" type="checkbox" value="1" />
<input disabled="disabled" class="Spec" type="checkbox" value="2" />
<input disabled="disabled" class="Spec" type="checkbox" value="5" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="8" /> 
<input disabled="disabled" class="Spec" type="checkbox" value="10" />  
<input disabled="disabled" class="Spec" type="checkbox" value="30" />

我有一些 jQuery 代码可以根据选择启用第二组复选框：

$('.oDiv').on('click', function() 
var select = $(this).val();

 if(select==1)
    $('.Spec:eq(1)').prop('disabled', false);
 
     else$('.Spec').prop('disabled', true);
);

现在，当用户选择 1 时，会启用第二个列表中正确的复选框，但当用户单击关闭时，它不会禁用。

jsFiddle：http://jsfiddle.net/pvSeL/

所以我想要实现的是，当用户选择一个复选框时，相关项目会被启用，而当他们取消选中复选框时，它们会被禁用。

【问题讨论】：

复选框的值不变。但是checked 状态发生了变化。与这个而不是复选框值进行比较。

【参考方案1】：

如果您想根据另一个复选框的选中状态来切换复选框，

$('.oDiv').on('click', function() 
    var select = $(this).val();

     if(select==1) 
        $('.Spec:eq(4)').prop('disabled', !$(this).is(':checked'));
     
);

jsFiddle

---

要概括此过程，您可以执行以下操作：

$('.oDiv').on('click', function () 
    var enable = 
        1: [1, 2, 30],
        2: [5, 8, 10]
    ;
    var val = $(this).val();
    var checked = $(this).is(':checked');
    enable[val] && enable[val].forEach(function (v) 
        console.log( $('.Spec[value="' + v + '"]'));
        $('.Spec[value="' + v + '"]')
            .prop('disabled', !checked);
    );
);

jsFiddle

【讨论】：

这就是我要找的！ :-)

您可以删除if 语句，因为值将始终为1

@Homer_J 检查更新版本是否为通用版本。

【参考方案2】：

val() 将始终在您的代码中返回1，因为它从元素中获取value 属性，无论它是否被选中/选中。您可以使用原生 DOM 元素的 checked 属性来执行此操作：

$('.oDiv').on('click', function () 
    if (this.checked) 
        $('.Spec:eq(1)').prop('disabled', false);
     else 
        $('.Spec').prop('disabled', true);
    
);

您也可以在 jQuery 中使用 :checked 选择器。

Updated fiddle

---

如果我只想在第一个复选框为 1 时启用第二组复选框，然后在复选框为 2 时启用另一组复选框，这将如何工作？

您需要设置一些逻辑来检查两个复选框中的任何一个被单击时的状态。像这样的：

$('.oDiv').on('click', function () 
    var $checkboxes = $('.oDiv');
    $('.Spec').prop('disabled', true);

    if ($checkboxes.eq(0).prop('checked') && $checkboxes.eq(1).prop('checked')) 
        $('.Spec').eq(1).prop('disabled', false);
    
    else if ($checkboxes.eq(0).prop('checked'))
        $('.Spec').eq(2).prop('disabled', false);
     
    else if ($checkboxes.eq(1).prop('checked'))
        $('.Spec').eq(3).prop('disabled', false);
     
);

Example fiddle

【讨论】：

$(this).is(':checked') 从来没有必要。请改用this.checked。

如果我只想在第一个复选框为 1 时启用第二组复选框，然后在复选框为 2 时启用另一组复选框，这将如何工作？

@Homer_J 您需要设置逻辑来检查两个复选框中的任何一个被单击时的状态。

@Homer_J 查看我的更新以获取一个工作示例

谢谢罗里 - 是的，有道理 - 非常感谢。

【参考方案3】：

对于一个复选框，val() 将始终返回该复选框的值，即当它被选中并提交表单时将提交的值。要检查是否选中了复选框，请使用

$(this).prop('checked')

或

$(this).is(':checked')

或者只是

this.checked

另请参阅http://jquery-howto.blogspot.nl/2013/02/jquery-test-check-if-checkbox-checked.html 了解更多信息和有用的技巧。

【讨论】：

或者，更好的是this.checked。

【参考方案4】：

我有点想弄清楚你想做什么。但我认为你可能想做这样的事情：

$('.oDiv').on('click', function () 
    var select = this.value; // get the value of the element clicked

    $('.Spec')
        .prop('disabled', true) // disable all .Spec checkboxes
        .eq(select)             // look at the checkbox with the position given
                                // by select
            .prop('disabled', !this.checked); // set it to disabled or enabled
                                              // depending on whether the box is
                                              // checked
);

http://jsfiddle.net/lonesomeday/pvSeL/2/