复选框不会更新

Question

我终于开始学习jQuery，当我开始认为自己已经掌握了一些东西的时候，我又陷入了困境。

我有一个脚本来统计一个部分中选中的复选框的数量。 如果该部分达到限制，则阻止用户进行更多选择并给他们留言，但应允许他们取消选中其他复选框。

我有这个工作，除了当他们取消选择一个复选框时，错误消息再次弹出，因为它仍在计算以前的复选框数量。如何正确更新计数？

http://jsfiddle.net/MadHatrix/VxscW/3/

HTML

<div class="panel"> 
    <button class="btn-option">1</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
    <button class="btn-option">2</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
    <button class="btn-option">3</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
</div> 
<hr> 
<div class="panel"> 
    <button class="btn-option">a</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
    <button class="btn-option">b</button> 
    <input type="checkbox" class="hidden-checkbox" /> 
</div> 

JQUERY

$('.panel').on('click', 'button', function() { 
    var checkbox = $(this).next('input:checkbox'); 
    var checkedTotal = $(this).parent('.panel').find('input[type=checkbox]:checked').length; 
    if (checkedTotal == 2) { 
     $(this).removeClass('btn-success'); 
     checkbox.prop('checked', false); 
     alert('limit has been reached'); 
    } else { 
     $(this).toggleClass('btn-success'); 
     checkbox.prop("checked", !checkbox.prop("checked")); 
    } 
}); 

在此先感谢。

Answer 1

你需要检查这个（点击）复选框是否已经检查。如果已经选中，那么你需要减少checkedTotal，因为这个复选框将被取消选中。

试试这个：

$('.panel').on('click', 'button', function() { 
    var checkbox = $(this).next('input:checkbox'); 
    var checkedTotal = $(this).parent('.panel').find('input[type=checkbox]:checked').length; 
    if(checkbox.prop('checked')) { 
     checkedTotal =checkedTotal -1; 
    } 
    if (checkedTotal == 2) { 
     $(this).removeClass('btn-success'); 
     checkbox.prop('checked', false); 
     alert('limit has been reached'); 
    } else { 
     $(this).toggleClass('btn-success'); 
     checkbox.prop("checked", !checkbox.prop("checked")); 
    } 
}); 

fiddle