Robert Ross Robert Ross - 11 days ago 4
HTML Question

Disabling option in a select dropdown with jQuery

On my page I have an input box with some dates and a dropdown select menu with options for hours. The script below is part of a method that executes every second.
When I select a date the first

if
below checks if it is available in my arraylist. If there is a match my code looks in
jBookedDates[jB]
, where the hours for the specific date are(the hours are in the following format :
["1130am", "3pm"]
or
["10am"]
).

My code works for the first date I pick, so the hours are disabled in the hours dropdown and everything looks fine.
The problem comes when I select another date with different hours. Then, I get the hours for the selected date
disabled
, plus the ones for the previously selected date also disabled, and of course, I'd like to have only the hours for the currently selected date disabled.

Can someone please help with this?

var jBookedDates=JSON.parse(jBooked);
Object.keys(jBookedDates).forEach(function(jB){
if (jB==$("#date").val()) {


//jBookedDates[jB] is ["1130am", "3pm"]
$("#time option").toArray().map($).forEach(function(optionEl) {
if (jBookedDates[jB].indexOf(optionEl.val()) >= 0) {
optionEl.prop('disabled', true);
}
});

} else {console.log("no matches");}
});


And the HTML :

<div class="form-group">
<label class="control-label col-sm-2" for="date">Date:</label>
<div class="col-sm-2 " class="dpckr" >
<!-- <input class="form-control " id="date " name="date " placeholder="MM/DD/YYY " type="text "/> -->
<input id="date" type="text" class="form-control datepicker" name="date" required>
</div>
</div>
<div class="form-group ">
<label class="control-label col-sm-2 " for="text ">Hour:</label>
<div class="col-sm-2 ">
<select class="form-control sct" id="time" name="time">
<option value="" 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>

Answer
if (jBookedDates[jB].indexOf(optionEl.val()) >= 0) {
  optionEl.prop('disabled', true);
} else {
  optionEl.prop('disabled', false);
}

Having just checked the jQuery documentation, you need to use the 'disabled', false

If you removeProp on a native property, it cannot be re-added later so the prior answer will fail.

Comments