主页 / 问题 / 1143252
Accepted
Aleksandr
Asked:2020-06-19 22:58:01 +0800 CST2020-06-19 22:58:01 +0800 CST

选中多个复选框

  • 772

帮助解决问题，为所有输入分配禁用，除了两个具有选中属性的输入。

也就是说，可以从整个列表中选择两个选项。

$(document).ready(function() {

  let count = $('.custom-control-input').length;

  $('.custom-control-input').click(function() {

    for (let i = 0; i <= count; i++) {
      if ($('.custom-control-input:not(:checked)')) {
        $('.custom-control-input').attr('disabled', 'disabled');
      }
    }
  });

});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Роспись по стеклу</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Валяние из войлока</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Приготовление мыла</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Создание авторских украшений</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Мастер класс по живописи</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Мастер класс по флористике</span>
  </li>
</ul>

javascript

1 个回答

  1. Best Answer

    $('.custom-control-input').on("change", function() {
  let limitReached = ( $('.custom-control-input:checked').length == 2 );
                     // == возвращает true или false
  
  $('.custom-control-input:not(:checked)').prop("disabled", limitReached);
});
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="list">
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Роспись по стеклу</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Валяние из войлока</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Приготовление мыла</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Создание авторских украшений</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Мастер класс по живописи</span>
  </li>
  <li>
    <input type="checkbox" class="custom-control-input">
    <span>Мастер класс по флористике</span>
  </li>
</ul>

    • 1

相关问题