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

Question

编辑: 我应该解释一下第二组复选框，只有在用户从第一组选择了某些内容时才会启用 - 如果用户选择第一个复选框，则第二个复选框将启用，而如果他们选择第一组中的第二个框，则第二组的不同复选框将被启用。抱歉，我应该解释得更清楚。

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

<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/ 因此，我想要实现的是，当用户选择复选框时，相关项目将被启用，当他们取消选择复选框时，这些项目将被禁用。

- Homer_J

---

复选框的值不会改变，但 checked 状态会改变。与其使用复选框的值进行比较，建议使用它的状态。 - TiMESPLiNTER

Answer 1

val()会从元素的value属性中获取值，无论它是否被选中/选定，都会始终返回1。您可以使用原生DOM元素的checked属性来实现此目的：

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

您也可以在jQuery中使用:checked选择器。 更新的演示代码

---

如果我只想让第一个复选框为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);
    } 
});

示例代码段

- Rory McCrossan

---

$(this).is(':checked') 是不必要的。请使用 this.checked 代替。 - lonesomeday

如果我只想在第一个复选框为1时启用第二组复选框的选择，那么这该怎么做？如果复选框为2，则启用不同的一组。 - Homer_J

@Homer_J 你需要编写一些逻辑来检查两个复选框的状态，当其中任意一个被点击时。 - Rory McCrossan

@Homer_J，请查看我的更新，其中有一个可行的示例。 - Rory McCrossan

谢谢Rory - 是的，很有道理 - 非常感谢。 - Homer_J

Answer 2

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

$('.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

- azz

---

这就是我要找的！ :-) - Homer_J

你可以删除 if 语句，因为该值将始终为 1。 - Rory McCrossan

@Homer_J，请查看更新后的通用版本。 - azz

Answer 3

对于复选框，val() 总是返回复选框的值，也就是当它被选中并提交表单时将被提交的值。要检查复选框是否被选中，请使用

$(this).prop('checked')

或者

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

或者只是

this.checked

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

- CompuChip

---

或者更好的方式是使用this.checked。 - lonesomeday

Answer 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/

- lonesomeday