Robert Ross Robert Ross - 1 year ago 75
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

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

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

Answer Source
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.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download