限制复选框并在更改选项卡后取消选中

时间:2013-04-09 02:30:16

标签: javascript jquery

我试图用select标签显示和隐藏div。在div中有复选框,其具有在用户选中2后禁用它们的逻辑。当我更改div时,复选框保持禁用状态。出于某种原因,最大2个复选框逻辑禁用所有复选框。

这是小提琴

http://jsfiddle.net/sghoush1/yJCYW/

Jquery看起来有点像这样

$('.selectOption').change(function(){
        $('.descContent').hide().eq(this.selectedIndex).show();
        $('.resourceMsg').hide();
    });

    var max = 2;
    var checkboxes = $('input[type="checkbox"]');

    checkboxes.change(function(){
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

        if(current >= max){
            $('.resourceMsg').show();
        } else{
            $('.resourceMsg').hide();
        }
    });

2 个答案:

答案 0 :(得分:0)

只需取消选中复选框,并在更改select元素时将disabled属性设置为false:

$(function () {
    var max = 2;
    var checkboxes = $('input[type="checkbox"]');
    $('.selectOption').change(function () {
        checkboxes.prop({
            'disabled': false,
            'checked': false
        });
        $('.descContent').hide().eq(this.selectedIndex).show();
        $('.resourceMsg').hide();
    });
    checkboxes.change(function () {
        var current = checkboxes.filter(':checked').length;
        checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

        if (current >= max) {
            $('.resourceMsg').show();
        } else {
            $('.resourceMsg').hide();
        }
    });
});

<强> jsFiddle example

答案 1 :(得分:0)

您没有启用它们的代码。

checkboxes.filter(':not(:checked)').prop('disabled', current >= max);

这将禁用页面上的所有未选中复选框,而不仅仅是当前显示的div中的

您需要重新考虑选择更改时应该发生的事情;你要么丢掉现有的选择,要么重新启用复选框(实际上是相同的):

$('.selectOption').change(function(){
    $('.descContent').find(':checked,:disabled').prop({checked: false, disabled: false});
    $('.descContent').hide().eq(this.selectedIndex).show();
    $('.resourceMsg').hide();
});

或者,您可以只停用当前div中的复选框。

checkboxes.change(function() {
    var content = $(this).parents('.descContent');
    var current = content.find(':checked').length;

    content.find(':not(:checked)').prop('disabled', current >= max);

    // ...
}