Question

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

我的代码适用于我选择的第一个日期，因此在小时下拉列表中禁用小时数，一切看起来都很好。当我选择不同小时的其他日期时，会出现问题。然后，我获取所选日期disabled的小时数，以及之前所选日期的小时数也已停用，当然，我希望仅禁用当前所选日期的小时数。< / p>

有人可以帮忙吗？

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文档，您需要使用＆＃39;禁用＆＃39;，false

如果您在本机属性上删除了Play，则以后无法重新添加，因此先前的答案将失败。

使用jQuery禁用选择下拉列表中的选项

1 个答案: