如何限制所选复选框的数量？

我有以下HTML：

 
Which level would you like? (Select 3 Levels)
 Level 1
 Level 2
 Level 3
 Level 4
 Level 5
 Level 6
 Level 7
  

直播网站：

http://www.chineselearnonline.com/amember/signup20.php

我怎么能这样做，以便用户只能选择其中3个复选框？

Answer 1

使用change事件，您可以执行以下操作：

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

看这个工作演示

Answer 2

试试这样吧。

关于变革事件，

 $('input[type=checkbox]').on('change', function (e) { if ($('input[type=checkbox]:checked').length > 3) { $(this).prop('checked', false); alert("allowed only 3"); } }); 

在JSFiddle中检查一下

Answer 3

试试这个演示 ：

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

Answer 4

我认为我们应该使用click而不是change

工作演示

Answer 5

 $("input:checkbox").click(function(){ if ($("input:checkbox:checked").length > 3){ return false; } }); 

Answer 6

工作演示

试试这个

 var theCheckboxes = $(".pricing-levels-3 input[type='checkbox']"); theCheckboxes.click(function() { if (theCheckboxes.filter(":checked").length > 3) $(this).removeAttr("checked"); }); 

Answer 7

这就是我的工作方式：

 // Function to check and disable checkbox function limit_checked( element, size ) { var bol = $( element + ':checked').length >= size; $(element).not(':checked').attr('disabled',bol); } // List of checkbox groups to check var check_elements = [ { id: '.group1 input[type=checkbox]', size: 2 }, { id: '.group2 input[type=checkbox]', size: 3 }, ]; // Run function for each group in list $(check_elements).each( function(index, element) { // Limit checked on window load $(window).load( function() { limit_checked( element.id, element.size ); }) // Limit checked on click $(element.id).click(function() { limit_checked( element.id, element.size ); }); }); 

Answer 8

我已将此function改为自动取消选中之前的function

  var limit = 3; $('.compare_items').on('click', function(evt) { index = $(this).parent('td').parent('tr').index(); if ($('.compare_items:checked').length >= limit) { $('.compare_items').eq(localStorage.getItem('last-checked-item')).removeAttr('checked'); //this.checked = false; } localStorage.setItem('last-checked-item', index); }); 

  1 2 3 4 5 6 7 8 9 10 

Answer 9

我想像letiagoalves说的那样，但你的表单中可能有多个复选框问题，所以我建议这样做：

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