Как установить disabled=false для всех элементов в Select>options, до вызова Ajax, который устанавливает disabled=true

Html

Я пробовал все, как показано, Перед вызовом Ajax я устанавливаю для всех элементов значение Disabled=false; Затем, когда я вызываю ajax, он работает и устанавливает disabled=true. Но в следующий раз, когда я меняю дату, он показывает те же даты, отключенные только с первой. Когда я меняю дату, я хочу, чтобы все элементы были Disabled=false, а затем успешно переходили к отключенным пертикулярным временным интервалам.

Я решил эту проблему, просто заменив строку

$("#id_time_slot").attr("disabled", false);

Вот эта строка перед вызовом Ajax

$("#id_time_slot option").prop('disabled', false);

Это решение предполагает использование чистого javascript с более чистым кодом без смешивания вещей:

let data = [0, 1, 2, 3, 4, 5, 6, 7, 8]; //fake data for snippet
const input = document.querySelector('#txtDate');
const select = document.querySelector('#id_time_slot');
input.addEventListener('change', (e) => {
  input.disabled = true; //disabled until ajax work
  const value = input.value;
  select.querySelectorAll('option').forEach(el => {
    el.disabled = false; //re-enable all options
  });
  setTimeout(() => { //fake ajax for snippet
    data.forEach(el => {
      document.querySelector('#op' + el).disabled = true; //disabled fake result of data ajax
    });
    data.shift(); // just for change result
    input.disabled = false;  // enabled input again
  }, 5000);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="text" id="txtDate">
<br>
<select name="time_slot" required="" id="id_time_slot">
  <option value="" selected="">---------</option>
  <option value="09:00 - 10:00" id="op0">09:00 - 10:00</option>
  <option value="10:00 - 11:00" id="op1">10:00 - 11:00</option>
  <option value="11:00 - 12:00" id="op2">11:00 - 12:00</option>
  <option value="12:00 - 13:00" id="op3">12:00 - 13:00</option>
  <option value="13:00 - 14:00" id="op4">13:00 - 14:00</option>
  <option value="14:00 - 15:00" id="op5">14:00 - 15:00</option>
  <option value="15:00 - 16:00" id="op6">15:00 - 16:00</option>
  <option value="16:00 - 17:00" id="op7">16:00 - 17:00</option>
  <option value="17:00 - 18:00" id="op8">17:00 - 18:00</option>
</select>

Я смоделировал ajax с "setTimeOut" каждые 5 секунд поддельная функция будет менять select

Вернуться на верх