Question

我知道这可能看起来像是重复的，但请相信我，我浏览了每一个我能找到的类似帖子，但没有找到任何解决方案。我试图限制可以检查的复选框的数量，但我希望检查仅应用于class="calendar-checkbox"的复选框。但是，我认为我的div结构可能阻止了这种工作。看起来它并没有检查每个div="calendar-column"。

    <div id="calendar-wrapper">
        <div class="calendar-column">
            <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br>
             <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br>
        </div>
        <div class="calendar-column">
            <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br>
             <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br>
        </div>
        <div class="calendar-column">
            <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br>
             <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br>
        </div>
        <div class="calendar-column">
            <input type="checkbox" name="date" value="2015-01-01" class="calendar-checkbox">01/01/2015<br>
             <input type="checkbox" name="date" value="2015-01-02" class="calendar-checkbox">02/01/2015<br>
        </div>
    </div>

这是我尝试过的示例脚本：

$('input[type=checkbox].calendar-checkbox').on('change', function(e) {
   if($(this).siblings(':checked').length >= 3) {
       this.checked = false;
       alert('max limit');
   }
});

非常感谢任何帮助。

Answer 1

实际上他们不是兄弟姐妹，你可以直接使用班级名称

$('input[type=checkbox].calendar-checkbox').on('change', function(e) {
   if($('input[type=checkbox].calendar-checkbox:checked').length >= 3) {
       this.checked = false;
       alert('max limit');
   }
});

Fiddle

Answer 2

请使用以下js代码检查

 $('input[type="checkbox"].calendar-checkbox').change(function(e) {
    if($('input[type="checkbox"].calendar-checkbox:checked').length >= 3) {
       this.checked = false;
       alert('max limit');
   }
});

Demo

Answer 3

我建议：

$('input:checkbox').on('change', function(e) {
   if($(this).parents("#calendar-wrapper").find(".calendar-checkbox:checked").length > 3) {
       this.checked = false;
       alert('max limit');
   }
});

fiddle

按类限制复选框

3 个答案: