how to set disabled=false to all element in the Select>options , before the Ajax call which set d-CodePudding

Html

<!DOCTYPE html>
<html>
<div >
{%if messages %}
        {% for message in messages %}
  <div  role="alert">
    <button type="button"  data-dismiss="alert" aria-label="Close">
      <span aria-hidden="true">&times;</span>
    </button>
    {{ message }}
  </div>
        {% endfor %}
{% endif %}
<div >
<div >
     <form id="appointment-form" role="form" method="post" enctype='multipart/form-data'>

          <!-- SECTION TITLE -->
          <div  data-wow-delay="0.4s">
               <h2>Book Appointment</h2>
          </div>
          {% csrf_token %}
          <input name="patient_name" value="{{request.user}}" hidden> 
          <div  data-wow-delay="0.8s">
               <div >
                    <label for="name">Clinic name</label>
                    {{ form.clinic_name }}
               </div>

               <div >
                    <label for="qualification">Doctor Name</label>
                    {{ form.doctor_name }}
               </div>
               <!-- try -->
               <p id="p-text">foo bar</p>
               <div >
                    <label for="specialist"> Date</label>
                    {{ form.date }}
               </div>
               <!-- try -->
               <p id="d-text">foo bar</p>

               <div >
                    <label for="location">Time slot </label>
                    <!-- {{ form.time_slot }} -->
                    <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>
               </div>
               

               <div >
                    <label for="description"> Description</label>
                    {{ form.description }}
                    <br>
                    <button type="submit"  id="cf-submit" name="submit">Submit Button</button>
               </div>
          </div>
    </form>
</div>
</div>
</div>

<script>

     //   Date  
     $("#txtDate").change(function () {
         var input = $(this).val()

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

         $.ajax({
             url: "{% url 'get_timeslot' %}",
             data: {
               'inputDate': input
             },
             
             dataType: 'json',
             success: function (data) {
     

               var myOpts = document.getElementById('id_time_slot').options;
               data.forEach(function(entry) 
               {
               var a = document.getElementById('op' entry).disabled = true;
                    console.log(a);
               
               });
             }
           });
         });
     </script>
</html>
{% endblock %}

I have tried every thing as shown, Before Ajax call I am setting All elements as Disabled=false; then too when I call ajax it is working and set disabled=true. But For next time When I change Date, It will show same dates disabled from first only. As I change the date , I want all element to be Disabled=false, then go in success to disabled perticural timeslots.

CodePudding user response：

I solved this ,by simply replacing the line

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

With this line before calling Ajax

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

CodePudding user response：

This is a solution that involves using pure javascript with cleaner code without mixing things up:

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>

I simulated an ajax with a "setTimeOut" every 5 seconds the fake function will change the select