javascript - 使用 jQuery 在选择下拉列表中禁用选项

Question

在我的页面上，我有一个包含一些日期的输入框和一个包含小时选项的下拉选择菜单。下面的脚本是每秒执行一次的方法的一部分。当我选择一个日期时，下面的第一个 if 检查它是否在我的数组列表中可用。如果有匹配项，我的代码会在 jBookedDates[jB] 中查找，其中特定日期的小时数是(小时数采用以下格式:["1130am", "3pm"] 或 ["10am"])。

我的代码适用于我选择的第一个日期，因此小时数下拉列表中的小时数被禁用，一切看起来都很好。问题 在我选择另一个时间不同的日期时出现。然后，我得到选定日期的小时数 disabled，加上先前选定日期的小时数也被禁用，当然，我只想禁用当前选定日期的小时数。

有人可以帮忙吗？

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");}
                });

和 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 1

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

刚刚查看了jQuery文档，需要使用'disabled', false

如果您在原生属性上移除 Prop，则以后无法重新添加它，因此先前的答案将失败。