Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/436.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript “限制”复选框,并在更改选项卡后取消选中_Javascript_Jquery - Fatal编程技术网

Javascript “限制”复选框,并在更改选项卡后取消选中

Javascript “限制”复选框,并在更改选项卡后取消选中,javascript,jquery,Javascript,Jquery,我正在尝试使用select标记显示和隐藏div。在div中有一些复选框,其逻辑是在用户选中2后禁用它们。当我更改div时,复选框处于禁用状态。出于某种原因,max 2复选框逻辑正在禁用所有复选框 这是小提琴 Jquery看起来有点像这样 $('.selectOption').change(function(){ $('.descContent').hide().eq(this.selectedIndex).show(); $('.resourceMsg').hi

我正在尝试使用select标记显示和隐藏div。在div中有一些复选框,其逻辑是在用户选中2后禁用它们。当我更改div时,复选框处于禁用状态。出于某种原因,max 2复选框逻辑正在禁用所有复选框

这是小提琴

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

只要取消选中复选框,并在更改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();
        }
    });
});

您没有代码来启用它们

checkboxes.filter(':not(:checked)').prop('disabled', current >= max);
这将禁用页面上所有未选中的复选框,而不仅仅是当前显示的
div
中的复选框

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

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

    // ...
}
您需要重新考虑在选择更改时应该发生什么;您需要扔掉现有选择或重新启用复选框(实际上是相同的事情):

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

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

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

    // ...
}

他们能为每个选项选择两个吗?谢谢,我没有这样想过。谢谢你指出这一点