限制複選框，並在更改標籤後取消選中

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

    // ... 
}