Question

我想创建一个包含多个选择选项的表单，使用第一个作为指示继续。

意思是，如果第一个未被选中，则无法选择下面的选项（默认情况下设置为禁用），只有选择了上一个选项后才能选择下一个选项，因此上。

我的代码几乎已经完成，但是当我将第一个选项更改为value=""的初始状态时，我无法将其全部恢复为禁用。

此外，我只能弄清楚如何使用onblur而不是即时启用。

包括小提琴[{3}}

＆＃13;

document.getElementById("ReservationCreationList").onblur = function() {
  if (this.value.length > 0) {
    document.getElementById("example-date-input").disabled = false;
  } else {
    document.getElementById("example-date-input").disabled = true;
    document.getElementById("example-date-input").value = "";
  }
}

/* I had to split this into a seperate function, because i did not know how to include this in the previous */
document.getElementById("example-date-input").onblur = function() {
  if (this.value.length > 0) {
    document.getElementById("ReservationTimeList").disabled = false;
  } else {
    document.getElementById("ReservationTimeList").disabled = true;
    document.getElementById("ReservationTimeList").value = "";
  }
}

＆＃13;

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" rel="stylesheet" />
<div class="container-fluid" style="margin-top: 2em;">



  <div class="form-group row">
    <label for="example-time-input" class="col-4 col-form-label">Select Restaurant</label>
    <div class="col-8">
      <select class="form-control" id="ReservationCreationList" name="NameReservationCreationList" onChange="getRestaurant(this.value);">
      <option name="" value="">Select Restaurant</option>
      <option name="ReservationFormSelector1" value="Restaurant1">Apollo</option>
    </select>
    </div>
  </div>
  <div class="form-group row">
    <label for="example-date-input" class="col-4 col-form-label">Reservation Date</label>
    <div class="col-8">
      <input class="form-control" type="date" value="" id="example-date-input" disabled>
    </div>
  </div>
  <div class="form-group row">
    <label for="example-time-input" class="col-4 col-form-label">Reservation Time</label>
    <div class="col-8">
      <select class="form-control" id="ReservationTimeList" name="NameReservationTimeList" onChange="getTime(this.value);" disabled>
      <option value="">Select Time</option>
      <option value="1900">1900</option>
    </select>
    </div>
  </div>

</div>

＆＃13;

Answer 1

这可能对您有用..请检查以下代码。

小提琴：https://jsfiddle.net/3o7pcu2a/

document.getElementById("ReservationCreationList").onblur = function() {
  if (this.value.length > 0) {
    document.getElementById("example-date-input").disabled = false;
  } else {
    document.getElementById("example-date-input").disabled = true;
    document.getElementById("ReservationTimeList").disabled = true;
    document.getElementById("example-date-input").value = "";
    document.getElementById("ReservationTimeList").value = "";
  }
}


document.getElementById("example-date-input").onblur = function() {
   if (this.value.length > 0) {
     document.getElementById("ReservationTimeList").disabled = false;
   } else {
   document.getElementById("ReservationTimeList").disabled = true;
   document.getElementById("ReservationTimeList").value = "";
  }
}

Answer 2

这个jquery块将满足您的所有要求。

$("#ReservationCreationList").on("change", function() {
  if ($(this).val() === "") {
    $("#example-date-input, #ReservationTimeList").prop("disabled", true);
  } else {
    $("#example-date-input").prop("disabled", false);
  }
});

$("#example-date-input").on('change', function() {
    $("#ReservationTimeList").prop("disabled", $(this).val() === "");
})

当前一个SELECT字段没有值时，DISABLE = FALSE

2 个答案: