这是我的代码：

Question

如何重新启用返回下拉列表值？我只有残疾部分，因为我不知道如何重新启用它。我在startTime上单击了1000，所以应该禁用endTime选项的值，直到1000。但是在此之后单击0800时，它直到2000才从0900重新启用。请注意，这是用于更新的部分。

这是我的代码：

    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>

Answer 1

我建议不要使用removeAttribute来再次启用它，而建议使用setAttribute并简单地将disabled设置为false。尝试使用$("#endTime option[value = '8']").setAttribute('disabled', false)。对您要禁用的每个选项重复此操作。

Answer 2

如果您简单地遍历结束时间选项，并对照选定的开始时间选项的索引检查它们在选择字段中的位置，则可以用很多来简化。索引位置小于或等于当前选择的开始时间选项的结束时间选项将设置为禁用，其余选项将启用。（条件表达式i <= idx的结果为true或false，然后简单地相应地设置disabled。）

$('#startTime').on('change', function() {
  var idx = $('#startTime')[0].selectedIndex;
  $('#endTime option').each(function(i) {
    $(this).prop('disabled', i <= idx);
  });
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

    Start Time:
    <select class="form-control" name="startTime" id="startTime">
    <option value="8">0800</option>
    <option value="9">0900</option>
    <option value="10">1000</option>
    <option value="11">1100</option>
    <option value="12">1200</option>
    <option value="13">1300</option>
    <option value="14">1400</option>
    <option value="15">1500</option>
    <option value="16">1600</option>
    <option value="17">1700</option>
    <option value="18">1800</option>
    <option value="19">1900</option>
    <option value="20">2000</option>
    </select>

    End Time:
    <select class="form-control" name="endTime" id="endTime">
    <option value="8">0800</option>
    <option value="9">0900</option>
    <option value="10">1000</option>
    <option value="11">1100</option>
    <option value="12">1200</option>
    <option value="13">1300</option>
    <option value="14">1400</option>
    <option value="15">1500</option>
    <option value="16">1600</option>
    <option value="17">1700</option>
    <option value="18">1800</option>
    <option value="19">1900</option>
    <option value="20">2000</option>
    </select>

Answer 3

这应该可以解决您的问题。另外，我对您的代码进行了一些更改。

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>

JSF中间示例：https://jsfiddle.net/k7nowcmu/

在下拉菜单中重新启用/禁用选项值

这是我的代码：

3 个答案: