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

Question

我有以下HTML：        <div class="pricing-levels-3">          <p><strong>Which level would you like? (Select 3 Levels)</strong></p>          <input class="single-checkbox"type="checkbox" name="vehicle" value="Bike">Level 1<br>          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 2<br>          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 3<br>          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 4<br>          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 5<br>          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 6<br>          <input class="single-checkbox" type="checkbox" name="vehicle" value="Bike">Level 7<br>        </div>直播网站：http://www.chineselearnonline.com/amember/signup20.php我该怎么做，以便用户只能选择其中三个复选框？

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

试试这个DEMO：

 $(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!');

     }

  });

});