Question

要求用户在步骤1中选择一个选项，然后将出现步骤2，否则将禁用步骤2。步骤3同样如此，要求用户选择步骤2，否则禁用步骤3。

问题在于用户已在步骤2中选择，但步骤3仍被禁用。用户应该可以在第3步中进行选择。

$(function() {
  //1st Step
  $("#selRegion").change(function() {
    $(".subCat").hide();

    $("#stateplaceholder").hide();
    
    //2nd Step
    if ($("#selRegion").val() == "") {
      $("#stateplaceholder").show();

      //3rd step
      if ($("#selAllRegions").val() != "" || $("#selCentral").val() != "") {
        $("#datefrom").removeAttr("disabled");
        $("#dateto").removeAttr("disabled");
        $("#time").removeAttr("disabled");
      }
    }

    var val = $(this).val();
    if (val == "all") {
      $("#selAllRegions").show();
    } else if (val == "central") {
      $("#selCentral").show();
    }
  });
});

.subCat {
  display: none;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form name="myform" id="myform" action="">
  <div>
    <div>
      <p>STEP 1 : Choose Region</p>
      <select id="selRegion">
        <option value="">..Select..</option>
        <option value="all" id="AllRegions">All Regions</option>
      </select>
    </div>
  </div>
  <div>
    <p>STEP 2 : Choose State</p>
    <select id="stateplaceholder" onchange="getAllRegions(this)" disabled>
      <option value="">Please select Region first</option>
    </select>
    <select id="selAllRegions" onchange="getAllRegions(this)" class="subCat">
      <option value="">..Select..</option>
      <option value="abc">ABC</option>
    </select>
    <select id="selCentral" onchange="getCentral(this)" class="subCat">
      <option value="">..Select..</option>
      <option value="xyz">XYZ</option>
    </select>
  </div>
  <div class="form-group">
    <p>STEP 3 : Choose Date and Time</p>
    <p>Please choose Date FROM.</p>
    <input id="datefrom" class="date-picker" placeholder="Date From" type="text" disabled>
    <p>Please choose Date TO.</p>
    <input id="dateto" class="date-picker" placeholder="Date To" type="text" disabled>
    <p>Please choose TIME Interval.</p>
    <input id="time" class="time-picker" placeholder="Time by Hourly" type="text" disabled>
    <button id="btnSubmit" type="button">Submit</button>
  </div>
</form>

JSFiddle

Answer 1

我修改了jquery片段以使其正常运行。我已经在第2步选择器中添加了change（）方法。

$(function() {
    //1st Step
    $("#selRegion").change(function() {

    $(".subCat").hide();

    $("#stateplaceholder").hide();
    //2nd Step
    if ($("#selRegion").val() == "") {
      $("#stateplaceholder").show();    

      //3rd step
      if ($("#selAllRegions").val() != "" || $("#selCentral").val() != "") {

        $("#datefrom").removeAttr("disabled");
        $("#dateto").removeAttr("disabled");
        $("#time").removeAttr("disabled");

      }     

    } 

    var val = $(this).val();
    if (val == "all") {
      $("#selAllRegions").show();
    } else if(val == "central") {
      $("#selCentral").show();
    } 
  });
  $("#selAllRegions").change(function(){
        if ($("#selAllRegions").val() != "" || $("#selCentral").val() != "") {

        $("#datefrom").removeAttr("disabled");
        $("#dateto").removeAttr("disabled");
        $("#time").removeAttr("disabled");

      } 
  })
});

使用jQuery无法禁用

1 个答案: