0

Помогите решить проблему, присвоить disable всем input, кроме двух с атрибутом checked.

То есть из всего списка можно было бы выбрать два варианта.

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

1 ответ 1

1

$('.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
  • Искренне благодарю, ваше решение помогло!
    – Aleksandr
    19 июн 2020 в 15:15

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge you have read our privacy policy.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.