限制复选框，并在更改标签后取消选中

Question

我试图用选择标签显示和隐藏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(); 
     } 
    }); 

Answer 1

只需取消选中的复选框，设置残疾人属性设置为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

Answer 2

你没有代码来启用它们。

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

    // ... 
}