Robert Ross Robert Ross - 27 days ago 14
Javascript Question

Make an option in input field inactive if it already exists in json

In the page I am building I have an option to make an appointment. This option is an input field with the 'available' hours for appointment as options in it.

The code looks like this :

<div class="form-group">
<label class="control-label col-sm-2" for="text">Hour:</label>
<div class="col-sm-2">
<select class="form-control" id="time">
<option value="Time" class="">Time</option>
<option value="10am" class="">10:00-10:30</option>
<option value="1030am" class="">10:30-11:00</option>
<option value="11am" class="">11:00-11:30</option>
<option value="1130am" class="">11:30-12:00</option>
<option value="12pm" class="">12:00-12:30</option>
<option value="1230pm" class="">12:30-13:00</option>
<option value="1pm" class="">13:00-13:30</option>
<option value="130pm" class="">13:30-14:00</option>
<option value="2pm" class="">14:00-14:30</option>
<option value="230pm" class="">14:30-15:00</option>
<option value="3pm" class="">15:00-15:30</option>
<option value="330pm" class="">15:30-16:00</option>
<option value="4pm" class="">16:00-16:30</option>
<option value="430pm" class="">16:30-17:00</option>
</select>
</div>
</div>


I also have an ajax request which returns an array with the already booked hours.

What I want to do(but have no idea how) is : to make all the booked hours inactive options in the list I have.

Any tips will be appreciated.

Answer

You iterate over each <option> and set it to disabled if its value is present in the array you mention. Otherwise re-set it to enabled.

const youArray = ["10am", "11am", "4pm"];

$('#time option').toArray().map($).forEach(function(optionEl) {
  if (youArray.indexOf(optionEl.val()) >= 0) {
    optionEl.prop('disabled', true);
  } else {
    optionEl.prop('disabled', false);
  }
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
  <label class="control-label col-sm-2" for="text">Hour:</label>
  <div class="col-sm-2">
    <select class="form-control" id="time">
      <option value="Time" class="">Time</option>
      <option value="10am" class="">10:00-10:30</option>
      <option value="1030am" class="">10:30-11:00</option>
      <option value="11am" class="">11:00-11:30</option>
      <option value="1130am" class="">11:30-12:00</option>
      <option value="12pm" class="">12:00-12:30</option>
      <option value="1230pm" class="">12:30-13:00</option>
      <option value="1pm" class="">13:00-13:30</option>
      <option value="130pm" class="">13:30-14:00</option>
      <option value="2pm" class="">14:00-14:30</option>
      <option value="230pm" class="">14:30-15:00</option>
      <option value="3pm" class="">15:00-15:30</option>
      <option value="330pm" class="">15:30-16:00</option>
      <option value="4pm" class="">16:00-16:30</option>
      <option value="430pm" class="">16:30-17:00</option>
    </select>
  </div>
</div>

Comments