Javascript 在下拉列表中重新启用/禁用选项值

如何重新启用返回下拉列表值？我只得到了禁用的部分，因为我不知道如何重新启用它回来。我在startTime上单击了1000，因此endTime选项值应该在1000之前被禁用。但当我在那之后点击0800时，它不会从0900重新启用，直到2000年。 请注意，这是更新部分

这是我的代码：

开始时间：
>0900
>1100
>1300
>1500
>1700
>1900
>0800
>1000
>1200
>1400
>1600
>1800
>2000
$（'#startTime'）。更改（函数（e）
{
如果（$（this.val（）=“8”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“9”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“10”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“11”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“12”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“13”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
$（“#endTime option[value='13']”）.prop（'disabled'，true）；
}
else if（$（this）.val（）=“14”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
$（“#endTime option[value='13']”）.prop（'disabled'，true）；
$（“#endTime option[value='14']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“15”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
$（“#endTime option[value='13']”）.prop（'disabled'，true）；
$（“#endTime option[value='14']”）.prop（'disabled'，true）；
$（“#endTime option[value='15']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“16”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
$（“#endTime option[value='13']”）.prop（'disabled'，true）；
$（“#endTime option[value='14']”）.prop（'disabled'，true）；
$（“#endTime option[value='15']”）.prop（'disabled'，true）；
$（“#endTime option[value='16']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“17”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
$（“#endTime option[value='13']”）.prop（'disabled'，true）；
$（“#endTime option[value='14']”）.prop（'disabled'，true）；
$（“#endTime option[value='15']”）.prop（'disabled'，true）；
$（“#endTime option[value='16']”）.prop（'disabled'，true）；
$（“#endTime option[value='17']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“18”）
{
$（“#endTime option[value='8']”）.prop（'disabled'，true）；
$（“#endTime option[value='9']”）.prop（'disabled'，true）；
$（“#endTime option[value='10']”）.prop（'disabled'，true）；
$（“#endTime option[value='11']”）.prop（'disabled'，true）；
$（“#endTime option[value='12']”）.prop（'disabled'，true）；
$（“#endTime option[value='13']”）.prop（'disabled'，true）；
$（“#endTime option[value='14']”）.prop（'disabled'，true）；
$（“#endTime option[value='15']”）.prop（'disabled'，true）；
$（“#endTime option[value='16']”）.prop（'disabled'，true）；
$（“#endTime option[value='17']”）.prop（'disabled'，true）；
$（“#endTime option[value='18']”）.prop（'disabled'，true）；
}
else if（$（this.val（）=“19”）
{
$（“#结束时间选项[值='8']”）。prop(
    Start Time:
    <select class="form-control" name="startTime" id="startTime">
    <option value="8" <?php if($row['StartTime'] == "8") echo 'selected="selected"'; ?> >0800</option>
    <option value="9" <?php if($row['StartTime'] == "9") echo 'selected="selected"'; ?> >0900</option>
    <option value="10" <?php if($row['StartTime'] == "10") echo 'selected="selected"'; ?> >1000</option>
    <option value="11" <?php if($row['StartTime'] == "11") echo 'selected="selected"'; ?> >1100</option>
    <option value="12" <?php if($row['StartTime'] == "12") echo 'selected="selected"'; ?> >1200</option>
    <option value="13" <?php if($row['StartTime'] == "13") echo 'selected="selected"'; ?> >1300</option>
    <option value="14" <?php if($row['StartTime'] == "14") echo 'selected="selected"'; ?> >1400</option>
    <option value="15" <?php if($row['StartTime'] == "15") echo 'selected="selected"'; ?> >1500</option>
    <option value="16" <?php if($row['StartTime'] == "16") echo 'selected="selected"'; ?> >1600</option>
    <option value="17" <?php if($row['StartTime'] == "17") echo 'selected="selected"'; ?> >1700</option>
    <option value="18" <?php if($row['StartTime'] == "18") echo 'selected="selected"'; ?> >1800</option>
    <option value="19" <?php if($row['StartTime'] == "19") echo 'selected="selected"'; ?> >1900</option>
    <option value="20" <?php if($row['StartTime'] == "20") echo 'selected="selected"'; ?> >2000</option>
    </select>

    End Time:
    <select class="form-control" name="endTime" id="endTime">
    <option value="8" <?php if($row['EndTime'] == "8") echo 'selected="selected"'; ?> >0800</option>
    <option value="9" <?php if($row['EndTime'] == "9") echo 'selected="selected"'; ?> >0900</option>
    <option value="10" <?php if($row['EndTime'] == "10") echo 'selected="selected"'; ?> >1000</option>
    <option value="11" <?php if($row['EndTime'] == "11") echo 'selected="selected"'; ?> >1100</option>
    <option value="12" <?php if($row['EndTime'] == "12") echo 'selected="selected"'; ?> >1200</option>
    <option value="13" <?php if($row['EndTime'] == "13") echo 'selected="selected"'; ?> >1300</option>
    <option value="14" <?php if($row['EndTime'] == "14") echo 'selected="selected"'; ?> >1400</option>
     <option value="15" <?php if($row['EndTime'] == "15") echo 'selected="selected"'; ?> >1500</option>
    <option value="16" <?php if($row['EndTime'] == "16") echo 'selected="selected"'; ?> >1600</option>
    <option value="17" <?php if($row['EndTime'] == "17") echo 'selected="selected"'; ?> >1700</option>
    <option value="18" <?php if($row['EndTime'] == "18") echo 'selected="selected"'; ?> >1800</option>
    <option value="19" <?php if($row['EndTime'] == "19") echo 'selected="selected"'; ?> >1900</option>
    <option value="20" <?php if($row['EndTime'] == "20") echo 'selected="selected"'; ?> >2000</option>
    </select>



     <script type="text/javascript">
        $('#startTime').change(function(e)
        {
          if($(this).val() == "8")
          {
            $("#endTime option[value = '8']").prop('disabled' , true);

          }
          else if($(this).val() == "9")
          {
            $("#endTime option[value = '8']").prop('disabled' , true);
            $("#endTime option[value = '9']").prop('disabled' , true);
          }
          else if($(this).val() == "10")
          {
            $("#endTime option[value = '8']").prop('disabled' , true);
            $("#endTime option[value = '9']").prop('disabled' , true);
            $("#endTime option[value = '10']").prop('disabled' , true);
          }
        else if($(this).val() == "11")
        {
          $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
        }
        else if($(this).val() == "12")
        {
          $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
        }
        else if($(this).val() == "13")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
        }
        else if($(this).val() == "14")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
        }
        else if($(this).val() == "15")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
          $("#endTime option[value = '15']").prop('disabled' , true);
        }
        else if($(this).val() == "16")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
          $("#endTime option[value = '15']").prop('disabled' , true);
          $("#endTime option[value = '16']").prop('disabled' , true);
        }
        else if($(this).val() == "17")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
          $("#endTime option[value = '15']").prop('disabled' , true);
          $("#endTime option[value = '16']").prop('disabled' , true);
          $("#endTime option[value = '17']").prop('disabled' , true);
        }
        else if($(this).val() == "18")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
          $("#endTime option[value = '15']").prop('disabled' , true);
          $("#endTime option[value = '16']").prop('disabled' , true);
          $("#endTime option[value = '17']").prop('disabled' , true);
          $("#endTime option[value = '18']").prop('disabled' , true);
        }
        else if($(this).val() == "19")
        {
         $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
          $("#endTime option[value = '15']").prop('disabled' , true);
          $("#endTime option[value = '16']").prop('disabled' , true);
          $("#endTime option[value = '17']").prop('disabled' , true);
          $("#endTime option[value = '18']").prop('disabled' , true);
          $("#endTime option[value = '19']").prop('disabled' , true);
        }
        else
        {
          $("#endTime option[value = '8']").prop('disabled' , true);
          $("#endTime option[value = '9']").prop('disabled' , true);
          $("#endTime option[value = '10']").prop('disabled' , true);
          $("#endTime option[value = '11']").prop('disabled' , true);
          $("#endTime option[value = '12']").prop('disabled' , true);
          $("#endTime option[value = '13']").prop('disabled' , true);
          $("#endTime option[value = '14']").prop('disabled' , true);
          $("#endTime option[value = '15']").prop('disabled' , true);
          $("#endTime option[value = '16']").prop('disabled' , true);
          $("#endTime option[value = '17']").prop('disabled' , true);
          $("#endTime option[value = '18']").prop('disabled' , true);
          $("#endTime option[value = '19']").prop('disabled' , true);
          $("#endTime option[value = '20']").prop('disabled' , true);
        }
        });
        </script>

echo 'Start Time:';
echo '<select class="form-control" name="startTime" id="startTime">';

for($i = 8; $i <= 20; $i++) {
    $time = str_pad($i, 2, "0", STR_PAD_LEFT); // Fills string with zeroes in front until it is 2 characters long, e.g. "08"
    $time = str_pad($time, 4, "0", STR_PAD_RIGHT); // Fills string with zeroes in back until it is 4 characters long, e.g. "0800"

    if($row['StartTime'] == "$i") {
        echo '<option value="' . $i . '" selected="selected">' . $time . '</option>';
    } else {
        echo '<option value="' . $i . '">' . $time . '</option>';
    }
}
echo '</select>';

echo 'End Time:';
echo '<select class="form-control" name="endTime" id="endTime">';

for($i = 8; $i <= 20; $i++) {
    $time = str_pad($i, 2, "0", STR_PAD_LEFT); // Fills string with zeroes in front until it is 2 characters long, e.g. "08"
    $time = str_pad($time, 4, "0", STR_PAD_RIGHT); // Fills string with zeroes in back until it is 4 characters long, e.g. "0800"

    if($row['EndTime'] == "$i") {
        echo '<option value="' . $i . '" selected="selected">' . $time . '</option>';
    } else {
        echo '<option value="' . $i . '">' . $time . '</option>';
    }
}
echo '</select>';

?>

<script type="text/javascript">
  $('#startTime').change(function(e) {
    var selectedStartTime = $(this).val();

    $( '#endTime' ).children("option").filter(function() {
        return parseInt(this.value) <= selectedStartTime;
     }).prop("disabled", true);

    $( '#endTime' ).children("option").filter(function() {
        return parseInt(this.value) > selectedStartTime;
     }).prop("disabled", false);
  });
</script>