Question

我终于开始学习jQuery了，当我开始认为我已经掌握了一些东西时，我再次陷入困境。

我有一个脚本可以计算一个部分中已选中复选框的数量。如果该部分达到限制，则阻止用户进行更多选择并向其发送消息，但应允许他们取消选中其他复选框。

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

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

复选框计数不更新

1 个答案: