Question

我正在尝试限制checkboxes及其相对labels可选的最大数量。复选框工作正常，但标签仍然可以选择超过限制。

我的html input形成如下：

<div data-toggle="buttons" class="btn-group bizmoduleselect">
<label id="b-<?php echo $term->term_id; ?>" class="btn btn-default <?php echo $labelchk ?>">
    <div class="bizcontent">
        <input id="youaresure" type="checkbox" name="email_cats[]" <?php echo $chk ?> value="<?php echo $term->term_id ?>" />
        <h5><?php echo $term->name ?></h5>
    </div>
</label>
</div>

和我的jQuery限制复选框和标签就像：

var $checkboxes = $('input[id="youaresure"]');
var $parent = $checkboxes.parent('label');
var max = 5;
$checkboxes.show();
$checkboxes.change(function () {
    $(this).prop('checked', function () {
        if ($(this).is(':checked')) {
            return ($checkboxes.filter(':checked').length <= max) ? true : false;
        }
    });
});
$parent.show();
$parent.change(function () {
    $(this).prop('class', function () {
        if ($(this).is('active')) {
            return ($parent.filter('active').length <= max) ? true : false;
        }
    }

基本上，php会向active的{{1}}父母插入labels课程，我应该阻止选择inputs:checked和labels 超过5 。对于复选框很好，但父标签仍然可以选择，基本上是可见的。

编辑：我忘了表明它适用于bootstrap，每个复选框都像按钮一样受到威胁！

Answer 1

change上没有<label>个事件。一切都应该在<input>

的事件处理程序中完成

我建议您在达到限制时禁用其他复选框。

以下内容将切换标签上的活动类以及禁用/启用未选中的输入

var max = 5;

var $checkboxes = $(':checkbox').change(function(e) {
  var maxChecked = $checkboxes.filter(':checked').length === max;
  // disable/enable others based on limit 
  $checkboxes.not(':checked').prop('disabled', maxChecked);
  // toggle label active based on checked state
  $(this).closest('label').toggleClass('active', this.checked);
});

的 DEMO

Answer 2

这不起作用，因为label没有更改处理程序。也许您最好将一些代码添加到复选框的属性检查功能中，以便在必要时删除“活动”类的父标签。

jQuery - 将标签组和复选框限制为最大数量

2 个答案: