时间戳

首页 > 解决方案 > 如何验证复选框最大检查/选择

javascript - 如何验证复选框最大检查/选择

问题描述

我想验证用户检查的最大值是否为 3。如果用户检查的次数超过 3，我想向用户显示可用的最大值为 3，或者我想在使用 javascript 或 jquery 提交表单之前禁用其他复选框

<div class="seatplan">
  <input type='checkbox' name='A1' value='200'>
  <input type='checkbox' name='A2' value='200'>
  <input type='checkbox' name='A3' value='300'>
  <input type='checkbox' name='A4' value='200'>
  <input type='checkbox' name='A5' value='300'>
</div>

标签： javascriptphpjquery

解决方案

请查看以下代码。希望能帮助到你：

$('.seatplan input[type=checkbox]').change(function() {
  var checked = $('.seatplan input[type=checkbox]:checked').length;
  console.log(checked);

  if (checked >= 3) {
    $('.seatplan input[type=checkbox]').not(':checked').prop('disabled', true);
  } else {
    $('.seatplan input[type=checkbox]').prop('disabled', false);
  }
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="seatplan">
  <input type='checkbox' name='A1' value='200'>
  <input type='checkbox' name='A2' value='200'>
  <input type='checkbox' name='A3' value='300'>
  <input type='checkbox' name='A4' value='200'>
  <input type='checkbox' name='A5' value='300'>
</div>

基本上我正在监听change每个复选框的事件，然后根据选中项目的长度，我禁用/启用其余的复选框。

推荐阅读