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

编辑：我应该解释一下，第二组复选框只有一些是启用的，这取决于用户从第一组中选择的内容-如果用户选择第一个复选框，则第二组中的第二个复选框是启用的，然而，如果他们选择了第一组中的第二个复选框，则会启用第二组中的另一组复选框。道歉，应该解释得更清楚

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

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

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

jsFiddle：

因此，我试图实现的是，当用户选择一个复选框时，相关项目将被启用，当他们取消选中复选框时，相关项目将被禁用。

val（）

将始终在代码中返回

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);
    } 
});

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

对于复选框，val（）将始终返回复选框的值，即选中复选框并发布表单时将提交的值。要检查复选框是否已选中，请使用

$(this).prop('checked')

或

或者只是

this.checked

---

有关更多信息和有用技巧，请参阅。

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

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

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

---

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

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

---

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

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

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

---

复选框的值不会更改。但选中的

状态发生变化。与此值进行比较，而不是与复选框值进行比较。
$（this）.is（“：checked”）
从来都不是必需的。使用
this。选中
。如果我只想在第一个复选框为1的情况下启用第二组复选框，然后在复选框为2的情况下启用另一组复选框，那么这是如何工作的？@Homer\u J单击其中一个复选框时，您需要将come逻辑设置到位，以检查两个复选框的状态。@Homer\u J查看我的更新以了解工作情况这方面的例子谢谢Rory-是的，有道理-非常感谢。这就是我要找的！：-）您可以删除
if
语句，因为该值将始终为
1
@Homer\J检查更新版本的通用版本。或者，更好的是，只检查
此项。