前のSELECTフィールドに値がない場合、DISABLE = FALSE

Question

複数の選択オプションを使用してフォームを作成し、最初のフィールドを使用して続行します。

最初のオプションが選択されていない場合、前のオプションが選択されているときにのみ、次のオプションを選択できるようになります（デフォルトでは無効に設定されています）。

私のコードはほとんど完了していますが、最初のオプションを最初の状態に変更すると、すべて無効にすることはできません。これはvalue=""です。

また、インスタントイネーブルの代わりにonblurを使用する方法しかわかりませんでした。

フィドルを含む

同様https://jsfiddle.net/Ljozz9mx/

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 = ""; 
 
    } 
 
}

<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>

Answer 1

この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() === ""); 
}) 

Answer 2

これはあなたに有用である可能性がある。..以下のコードをご確認ください。

フィドル：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 = ""; 
    } 
}