0
         <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,
  });
}

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

2
  • В данном случае никак, т.к в текущем селекте нельзя выбрать оба значения одновременно 20 дек 2021 в 14:38
  • имеется ввиду если выбрать value 1 ИЛИ value 2 в первом селекте @АлексейШиманский
    – Ваня
    20 дек 2021 в 14:40

1 ответ 1

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>

0

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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