jquery限制div中的复选框

Posted 2023-05-09

【中文标题】jquery限制div中的复选框

【英文标题】：jquery limit checkboxes in divs

【发布时间】：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 中使用此输入标签？

提前多谢

【参考方案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>

【讨论】：

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