Disabling option in a select dropdown with jQuery

Question

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>

Nope, going back to my original comment. :D Add the else and remove disabled to clear the ones set from the prior date you selected. — Chris Caviness
– Chris Caviness, Commented Nov 22, 2016 at 19:11
Change optionEl.prop('disabled', true); to optionEl.prop('disabled', 'disabled'); — Daniel Corzo
– Daniel Corzo, Commented Nov 22, 2016 at 19:11

Chris Caviness · Accepted Answer · 2016-11-22 19:17:44Z

2

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.

edited Nov 22, 2016 at 19:17

answered Nov 22, 2016 at 19:11

Chris Caviness

5963 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Chris Caviness Over a year ago

You can simplify it to: optionEl.prop('disabled', (jBookedDates[jB].indexOf(optionEl.val(I)) >=0)) and do it in one line by since "true" and "false" are the outcomes of your condition test

Collectives™ on Stack Overflow

Disabling option in a select dropdown with jQuery

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related