如何限制选中复选框的数量等于使用 jquery 选择值？答案

【问题标题】：How to limit count of checked checkboxes equal to select value using jquery?如何限制选中复选框的数量等于使用 jquery 选择值？
【发布时间】：2017-02-05 00:37:39
【问题描述】：

我正在尝试根据用户选择的选择选项来限制能够检查的复选框的数量，即option1 = 1 复选框option 2 = 2 复选框，如果他们尝试选择更多，则提醒用户和.prop("checked", false)。

但我只是发生了奇怪的事情，我不明白为什么请帮忙！

html:

<form>
    <select onclick="systemSelected();" class="mySelectBox">
        <option value="1">option1</option>
        <option value="2">option2</option>
        <option value="3">option3</option>
        <option value="4">option4</option>
        <option value="5">option5</option>
    </select>
</form>
<form onclick="limitCheckbox(userSelected);">
    <input type="checkbox" name="box1">
    <input type="checkbox" name="box2">
    <input type="checkbox" name="box3">
    <input type="checkbox" name="box4">
    <input type="checkbox" name="box5">
</form>

javascript：

var userSelected = 0;
function systemSelected() {
    $(".mySelectBox option").each(function(){
        if ($(this.selected)) {
            userSelected = parseInt($(".mySelectBox").val());
        }
    });
}
function limitCheckbox(userSystem) {
    $("input[type=checkbox]").click(function(){
        if($("input[type=checkbox]:checked".length > userSystem)) {
            $(this).prop("checked", false);
            alert("too many numbers");
        } else if ($("input[type=checkbox]:checked".length === 0 )) {    
            alert("please select a game too play");
        }
    });
}

【问题讨论】：

您绝对必须为此使用两个独立的<form> 元素，还是用于演示？（但是，这与您的问题完全无关。）

标签： javascript jquery html html-select radio

【解决方案1】：

不要使用提醒（为什么用户会觉得自己很愚蠢）
使用disabled 属性（让用户看到并知道）

var $ckb = $('[name*=box]'),
    $sel = $('.mySelectBox');

function ckkk () {

  var ckd = $ckb.filter(":checked").length,
      max = parseInt($sel.val(), 10);

  if(ckd > max) $ckb.prop({checked:false, disabled:false});
  else        $ckb.not(":checked").prop({disabled: ckd >= max});


}

$ckb.add($sel).on("change", ckkk);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<select class="mySelectBox">
  <option value="1">option1</option>
  <option value="2">option2</option>
  <option value="3">option3</option>
  <option value="4">option4</option>
  <option value="5">option5</option>
</select>

<input type="checkbox" name="box1">
<input type="checkbox" name="box2">
<input type="checkbox" name="box3">
<input type="checkbox" name="box4">
<input type="checkbox" name="box5">

【讨论】：

禁用是个好主意，感谢所有回答，我仍在学习很多东西！

【解决方案2】：

使用$("input[type=checkbox]").on('change',function(){ 选择器，它会在每次更改复选框时触发事件。您可以根据条件管理您的案例。

请检查下面的sn-p。

var userSelected = 0;
  $("input[type=checkbox]").on('change',function(){
    if($("input[type=checkbox]:checked").length > parseInt($(".mySelectBox").val())) {
      $(this).prop("checked", false);
      alert("too many numbers");


    } else if ($("input[type=checkbox]:checked").length === 0 ) {

      alert("please select a game too play");
    }
  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="mySelectBox">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
    <option value="4">option4</option>
    <option value="5">option5</option>
  </select>

</form>

<form>
  <input type="checkbox" name="box1">
  <input type="checkbox" name="box2">
  <input type="checkbox" name="box3">
  <input type="checkbox" name="box4">
  <input type="checkbox" name="box5">
</form>

【讨论】：

【解决方案3】：

$('input:checkbox').change(function() {

  var number = $('.mySelectBox option:selected').val();

  if ($('input:checkbox:checked').length > number) {


    alert('more than selected')
    $(this).prop('checked', false);//dont check the click checkbox
  }
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
  <select class="mySelectBox">
    <option value="1">option1</option>
    <option value="2">option2</option>
    <option value="3">option3</option>
    <option value="4">option4</option>
    <option value="5">option5</option>
  </select>

</form>

<form>
  <input type="checkbox" name="box1">
  <input type="checkbox" name="box2">
  <input type="checkbox" name="box3">
  <input type="checkbox" name="box4">
  <input type="checkbox" name="box5">
</form>

【讨论】：