jquery限制div中的复选框答案

【问题标题】：jquery limit checkboxes in divsjquery限制div中的复选框
【发布时间】：2018-06-01 20:33:11
【问题描述】：

我想限制表单中可用复选框的数量。我尝试使用以下 jquery 代码

var limit = 2;
$('input.checkbox').on('change', function(evt) {
    if($(this).siblings(':checked').length >= limit) {
        this.checked = false;
    }
});

这行得通。但是如果输入标签在 div 标签内，jquery 就会停止工作。

示例：

<div class='voteContainer'>
    <input name='vote1' value='1' class='checkbox' type='checkbox' />
</div>
<div class='voteContainer'>
    <input name='vote2' value='3' class='checkbox' type='checkbox' />
</div>
<div class='voteContainer'>
    <input name='vote3' value='3' class='checkbox' type='checkbox' />
</div>

我必须如何更改 jquery 才能在 div 中使用此输入标签？

提前多谢

【问题讨论】：

标签： jquery html forms checkbox input

【解决方案1】：

他们不再是兄弟姐妹了。计算出现在 div 中的 voteContainer 类，如下所示：

var limit = 2;
$('input.checkbox').on('change', function(evt) {
    if($('div.voteContainer input:checked').length >= limit) {
        this.checked = false;
    }
});

【讨论】：

【解决方案2】：

试试这个：

$("input[name='tech']").change(function () {
      var maxAllowed = 2;
      var cnt = $("input[name='tech']:checked").length;
      if (cnt > maxAllowed)
      {
         $(this).prop("checked", "");
         alert('Select maximum ' + maxAllowed + ' technologies!');
     }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" name="tech" value="jQuery" /> jQuery <br/>

<input type="checkbox" name="tech" value="JavaScript" />JavaScript <br/>

<input type="checkbox" name="tech" value="Prototype" /> Prototype<br/>

<input type="checkbox" name="tech" value="Dojo" /> Dojo<br/>

<input type="checkbox" name="tech" value="Mootools" /> Mootools <br/>

【讨论】：

【解决方案3】：

为什么不将它包装在一个父 div 中并获取所有被选中的复选框的计数？

var limit = 2;
$('input.checkbox').on('change', function(evt) {
    if($('#checkboxes input.checkbox:checked').length > limit) {
       this.checked = false;
    }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<div id="checkboxes">
<div class='voteContainer'>
    <input name='vote1' value='1' class='checkbox' type='checkbox' />
</div>
<div class='voteContainer'>
    <input name='vote2' value='3' class='checkbox' type='checkbox' />
</div>
<div class='voteContainer'>
    <input name='vote3' value='3' class='checkbox' type='checkbox' />
</div>
</div>

【讨论】：

是的，谢谢，我现在这样改了，效果很好:)