限制用户检查jQuery中的复选框

我有一堆复选框，我想限制用户根据selectbox值检查复选框。

例如，如果用户在selectbox中选择值-3，那么他只能检查3个复选框（任意三个）

演示： 小提琴

HTML

 1 2 3 4 5 6 

 
  HTML 
  CSS 
  HTML 
  CSS 
  HTML 
  CSS  

我怎样才能做到这一点？ 请有人帮帮我吗？

Answer 1

如果你的意思是选项val = 3 – >可以检查3个复选框，那么试试这个http://jsfiddle.net/HNmhL/9/

使用Javascript

 $(document).ready(function(){ $('#count').on('change', function(){ $('input[type=checkbox]').prop('checked', false); }); $('input[type=checkbox]').on('change', function(){ if($('input[type=checkbox]:checked').length > $('#count').val()){ $(this).prop('checked', false); } }); }); 

Answer 2

根据Pavlo的有用评论进行了更新

演示： http ： //jsfiddle.net/HNmhL/23/

JQuery的

 // Cache the selector var checkBoxes = $('input[type=checkbox]'); checkBoxes.click(function() { validateCheckboxes(); }); $('#count').change(function() { // Only neave the first N items checked (where N = number of items allowed) checkBoxes.filter(':checked:gt(' + ($(this).val() - 1) + ')').attr('checked', false); validateCheckboxes(); }); function validateCheckboxes() { // If the number of checked items exceeds the number allowed if (checkBoxes.filter(':checked').length >= $('#count').val()) { // Disable all un-checked boxes... checkBoxes.not(':checked').attr('disabled', true); } else { // We haven't hit out limit yet; make sure the checkboxes are still enabled checkBoxes.attr('disabled', false); } }; 

Answer 3

用这个

 $('input[id^="checkbox-"]').hide(); $('select').on('change', function (e) { var valueSelected = this.value; for(i=1;i<=valueSelected;i++) { $('#checkbox-' + i).show(); } }); 

Answer 4

这可以使用非常少的代码在单个条件检查中完成：

 $('input[type=checkbox]').on('click', function(event){ if($('div.checkbox input[type=checkbox]:checked').length > $('#count').val()) { event.preventDefault(); } }); 

看看这个小提琴的例子。