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

How to limit count of checked checkboxes equal to select value using jquery?

本文关键字：于选择 选择 jquery 何使用 复选框      更新时间：2023-09-26

我试图根据用户选择的选择选项来限制能够被选中的复选框的数量，即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");
        }
    });
}
  1. 不要使用警报(为什么用户会觉得愚蠢)
  2. 使用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">

使用$("input[type=checkbox]").on('change',function(){选择器，它将在每次更改复选框时触发事件。你还可以管理有条件的箱子。

请检查下面的代码片段。

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>

$('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>

相关文章：