Как отключить select при выбранном option в другом select

Question

         <div class="custom__select">
            <!-- MODIFIED добавлен id -->
            <select name="select" id="holiday">
              <option value="1">Да</option>
              <option value="2">Нет</option>
              <option value="3">Доп.нагрузка</option>
            </select>
          </div>
          <div class="custom__select">
            <!-- MODIFIED добавлен id -->
            <select name="select" id="percentage">
              <option value="">0 %</option>
              <option value="">10 %</option>
              <option value="">20 %</option>
              <option value="">30 %</option>
              <option value="">40 %</option>
              <option value="">50 %</option>
            </select>
          </div>

Нужно чтобы при значении value = 1 или 2 в первом селекте второй селект отключался полностью, то есть выбор в нем невозможен. Как это реализовать через js или jquery? Еще одна загвоздка, select стилизован при помощи библиотеки choice.js и селекты обработаны с помощью цикла вот код:

<script src="choices.min.js"></script>

var element = document.querySelectorAll('select');

for (var i = 0; i < element.length; i++) {
  var choices = new Choices(element[i], {
    searchEnabled: false,
    itemSelectText: '',
    placeholder: true,
    placeholderValue: 1,
  });
}

Что тогда в этом случае нужно делать?

Answer 1

JQuery

$(document).on('change', '#holiday', function() {
    let percentageBlockHasToBeBlock = [1,2].includes(+$(this).find('option:selected').val());
    $('#percentage').prop('disabled', percentageBlockHasToBeBlock);
});

$(document).ready(() => {
    $('#holiday').trigger('change');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0/jquery.min.js"></script>
<div class="custom__select">
  <!-- MODIFIED добавлен id -->
  <select name="select" id="holiday">
    <option value="1">Да</option>
    <option value="2">Нет</option>
    <option value="3">Доп.нагрузка</option>
  </select>
</div>
<div class="custom__select">
  <!-- MODIFIED добавлен id -->
  <select name="select" id="percentage">
    <option value="">0 %</option>
    <option value="">10 %</option>
    <option value="">20 %</option>
    <option value="">30 %</option>
    <option value="">40 %</option>
    <option value="">50 %</option>
  </select>
</div>

БЛОГ НА HUSL

Как отключить select при выбранном option в другом select

Ответы (1 шт):