Question

我知道如何在选中多个复选框后停止检查复选框。我的问题是如何针对几个问题执行此操作，每个问题都可以勾选多个复选框。

我的代码位于jsFiddle，可见下方：

代码段

＆＃13;

 
 $('input[type="checkbox"]').click(function(event) {
    if (this.checked && $('input:checked').length > 3) {
        event.preventDefault();
        alert('You\'re not allowed to choose more than 3 boxes');
    }
});

＆＃13;

<p><strong><em>Question 1 </em></strong></p>
 <br></br><br></br>
 <div id="Checklist1B10">
 <table>
 <tr>
 <td width="1%"> 
 <input type="checkbox"  name="QUESTION1" id="QUESTION1A1"/>
 </td> 
 <td width="15%">
 <label for="QUESTION1A1">Strongly Disagree4</label>
 </td>
 <td width="1%">
 <input type="checkbox" name="QUESTION1" id="QUESTION1A2"/>
 </td> 
 <td width="15%"> 
 <label for="QUESTION1A2">Disagree</label>
 </td> 
 <td width="1%"> 
 <input type="checkbox"  name="QUESTION1" id="QUESTION1A3"/> 
 </td> 
 <td width="15%"> 
 <label for="QUESTION1A3">Undecided</label>
 </td> 
 </tr> 
 <tr> 
 <td width="1%">
 <input type="checkbox"  name="QUESTION1" id="QUESTION1A4"/>
 </td> 
 <td width="15%">
 <label for="QUESTION1A4">Agree</label>
 </td> 
 <td width="1%">
 <input type="checkbox"  name="QUESTION1" id="QUESTION1A5"/>
 </td> 
 <td width="15%"><label for="QUESTION1A5">Strongly Agree </label>
  </td>
 </tr>
 </table>
 </div>
 <p><strong><em>Question 2 </em></strong></p>
<br></br> <br></br> 
<div class="c7" id="Checklist2B10"> 
<input type="checkbox" name="QUESTION2" id="QUESTION2A1"/>
<label for="QUESTION2A1">Monday</label>
<br></br> 
<input type="checkbox" name="QUESTION2" id="QUESTION2A2"/>
<label for="QUESTION2A2">Tuesday</label>
<br></br> 
<input type="checkbox"  name="QUESTION2" id="QUESTION2A3"/>
<label for="QUESTION2A3">Wednesday</label>
<br></br> 
<input type="checkbox"  name="QUESTION2" id="QUESTION2A4"/> 
<label for="QUESTION2A4">Thursday</label>
<br></br>
<input type="checkbox"  name="QUESTION2" id="QUESTION2A5"/> 
<label for="QUESTION2A5">Friday</label>
<br></br> 
<input type="checkbox"  name="QUESTION2" id="QUESTION2A6"/>
<label for="QUESTION2A6">Saturday</label>
<br></br> 
<input type="checkbox"  name="QUESTION2" id="QUESTION2A7"/> 
<label for="QUESTION2A7">Sunday</label>
<br></br> 
</div>

＆＃13;

Answer 1

只需对你的if条件做一点改动即可。

如果您需要帮助，请与我们联系

if (this.checked && $('input[name='+$(this).prop('name')+']:checked').length > 3) {
   event.preventDefault();
   alert('You\'re not allowed to choose more than 3 boxes');
}

Answer 2

检查每组复选框的一些祖先检查的数量范围：

 $(document).on('click', 'input[type="checkbox"]', function(event) {
   var $this = $(this);
   if (this.checked && $this.closest('table,div').find('input:checked').length > 3) {
     event.preventDefault();
     alert('You\'re not allowed to choose more than 3 boxes');
   }
 });

JSFiddle： http://jsfiddle.net/TrueBlueAussie/drSJV/58/

在上面的示例中，我必须搜索表格或div，因为您的页面布局不一致。

此示例还使用委托事件处理程序，因为它比几十个单独的事件处理程序更有效。

Answer 3

您可以使用现有的输入名称（ QUESTION1 ， QUESTION2 ...）来限制选择：

$('input[type="checkbox"]').click(function(event) {
    if (this.checked && $('input[name=' + this.name + ']:checked').length > 3) {
        event.preventDefault();
        alert('You\'re not allowed to choose more than 3 boxes');
    }
});

如何在检查了几个问题的复选框后停止检查复选框

3 个答案: