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

时间:2013-11-06 08:11:30

标签: php jquery checkbox

编辑:我应该已经解释了第二组复选框只有一些是启用的,具体取决于用户从第一组选择的内容 - 如果用户选择第一个复选框,则第二个复选框第二组启用,而如果他们选择第一组中的第二个框,则启用第二组中的另一组复选框。道歉,应该更清楚地解释。

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

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

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

4 个答案:

答案 0 :(得分:4)

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

答案 1 :(得分:4)

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

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

答案 2 :(得分:1)

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

$(this).prop('checked')

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

或只是

this.checked

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

答案 3 :(得分:0)

我正在努力解决你想做的事情。但我想你可能想做这样的事情:

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