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

Question

我想验证用户最多检查到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>

Answer 1

请查看以下代码。希望它有所帮助：

$('.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事件，然后根据已检查项目的长度，禁用/启用其余复选框。

Answer 2

如果你想不使用jQuery，你可以这样做：

＆＃13;

＆＃13;

const seatplan = document.querySelector('.seatplan');

seatplan.addEventListener('change', (e) => {
    const checked = seatplan.querySelectorAll('input:checked');
    const unchecked = seatplan.querySelectorAll('input:not(:checked)');
    if (checked.length >= 3) {
        unchecked.forEach(el => el.setAttribute('disabled', true));
    } else {
        unchecked.forEach(el => el.removeAttribute('disabled'));
    }
});

＆＃13;

.seatplan > input{
  height: 2em;
  width: 2em;
  cursor: pointer;
}

.seatplan > input:disabled{
  cursor: not-allowed;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 3

您还可以使用屏幕中的另一个div或label字段显示消息，如下所示

＆LT;

!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-js -->enter code here`

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

      if (checked >= 3) {
$("diverror").show();
$("diverror").html("A maximum of only 3 check boxes can be checked")
        $('.seatplan input[type=checkbox]').not(':checked').prop('disabled', true);
      } else {
$("diverror").hide();
        $('.seatplan input[type=checkbox]').prop('disabled', false);
      }
    })

<!-- language: lang-html -->

    <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>
<div id="diverror"></div>

<!-- end snippet -->

Answer 4

<div class="seatplan">
  <p class="limit">0 / 3</p>
  <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>

$('.seatplan input').on('click', function() {
  $('.limit').text(`${$('.seatplan input:checked').length} / 3`);
  $('.seatplan input').prop('disabled', '');

  if ($('.seatplan input:checked').length >= 3) {
    $('.seatplan input:not(:checked)').prop('disabled', 'disabled');
  }
});

https://jsfiddle.net/sjmfxtag/

这并不需要任何变量。它还为用户提供了限制的视觉效果。

Answer 5

var checked = $（'input [type = checkbox]：checked'）。length;

如果（选中→3）

{

警告（'无效'）;

返回false;

}

否则 {

警报（ '有效'）;

return true;

}