php jQuery 根据复选框选择启用/禁用复选框

jQuery enable/disable checkbox based on checkbox selection

提问by Homer_J

EDIT: I should have explained that the second set of checkboxes only some are enabled depending on what the user selects from the first set - if a user selects the first checkbox, then the second checkbox in the second set is enabled, whereas if they select the second box in the first set then a different set of checkboxes in the second set are enabled. Apologies, should have explained more clearly.

编辑：我应该解释说，第二组复选框只有一些被启用，这取决于用户从第一组中选择的内容 - 如果用户选择第一个复选框，则第二组中的第二个复选框被启用，而如果他们选择第一组中的第二个框然后启用第二组中的一组不同的复选框。抱歉，应该解释得更清楚。

I have a two series of checkboxes as follows:

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

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

I have some jQuery code that enables the second set of checkboxes based on a selection:

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

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

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

Now, what happens is that when a user selects 1, the correct checkbox in the second list is enabled but when the user clicks off, it doesn't disable.

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

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

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

So what I am trying to achieve is when a user selects a checkbox, the relevant items are enabled and when they uncheck the checkbox they become disabled.

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

采纳答案by azz

If you want to toggle a checkbox based on the checked state of another,

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

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

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

jsFiddle

js小提琴

---

---

To generalise this process, you can do the following:

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

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

js小提琴

回答by Rory McCrossan

val()will always return 1in your code as it gets the valueattribute from the element, regardless of whether it is checked/selected or not. You can use the checkedproperty of the native DOM element to do this:

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

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

You could also use the :checkedselector in jQuery.

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

Updated fiddle

更新的小提琴

---

---

How does this work if I only want a selection of the second set of checkboxes enabled if the first checkbox is 1 and then a different set if the checkbox is 2?

如果我只想在第一个复选框为 1 的情况下启用第二组复选框的选择，然后在复选框为 2 的情况下启用不同的组，这将如何工作？

You need to put some logic in place to check the states of both checkboxes when either of them is clicked. Something like this:

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

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

示例小提琴

回答by CompuChip

For a checkbox, val() will always return the value of the checkbox, that is, the value that would be submitted when it is checked and the form is posted. To check if a checkbox is checked, use

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

$(this).prop('checked')

or

或者

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

or just

要不就

this.checked

Also see http://jquery-howto.blogspot.nl/2013/02/jquery-test-check-if-checkbox-checked.htmlfor more information and useful tricks.

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

回答by lonesomeday

I'm struggling slightly to work out what you want to do. But I think you probably want to do something like this:

我正在努力弄清楚你想做什么。但我认为你可能想做这样的事情：

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

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