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

我试图限制checkboxes及其相关的labels可选的最大数量。复选框工作正常，但标签仍然可以选择超过限制。jQuery - 将标签和复选框的组限制为最大数

我的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类labels父母inputs:checked和我应该防止labels和inputs被选中如果超过5。对于复选框是好的，但父标签仍然可选，基本上是可见的。

编辑：我已经忘记表明它可以与bootstrap一起工作，并且每个复选框都像一个按钮一样威胁着！

来源

2016-07-30 XiLab

PLZ添加完整的代码的jsfiddle –

标签没有改变事件。因此，您可以使用标签点击事件或在复选框更改事件上执行所有操作。 – Gatsbill

不能在页面中重复Id，它们根据定义是唯一的 – charlietfl

<label>上没有change事件。一切都应该在事件处理程序的<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

来源

2016-07-30 11:00:52 charlietfl

你好，谢谢你的回答，但我试过你的解决方案，它不会工作。我检查了我的代码，实际上我忘记了它可以与bootstrap data-toggle =“buttons”一起使用。我编辑了这个问题。可能就是这样！我已经使用[this]（http://bootsnipp.com/snippets/featured/multi-select-tiled-layout）片段。 – XiLab

我的意思是复选框像按钮一样对待！ – XiLab

谢谢我终于从你的答案开始解决问题。祝你有美好的一天！ – XiLab

这不起作用，因为标签没有更改处理程序。也许你应该更好地将你的一些代码添加到你的复选框的属性检查功能，如果有必要删除'活跃'类父标签。

来源

2016-07-30 10:27:44

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

回答

相关问题