如何禁用基於另一個選擇選項的選擇選項？

Question

我一直想知道是否可以根據另一個選擇選項的值長度禁用選擇選項。

 var start = 2010; var end = 2030; var options = ""; for (var year = start; year <= end; year++) { options += "<option>" + year + "</option>"; } document.getElementById("idTahunBerlaku").insertAdjacentHTML( "beforeend", options); var start = 1; var end = 12; var options = ""; for (var month = start; month <= end; month++) { options += "<option>" + month + "</option>"; } document.getElementById("idBulanBerlaku").insertAdjacentHTML( "beforeend", options); var start = 2010; var end = 2030; var options = ""; for (var year = start; year <= end; year++) { options += "<option>" + year + "</option>"; } document.getElementById("idTahunBerlakuS").insertAdjacentHTML( "beforeend", options); var start = 1; var end = 12; var options = ""; for (var month = start; month <= end; month++) { options += "<option>" + month + "</option>"; } document.getElementById("idBulanBerlakuS").insertAdjacentHTML( "beforeend", options); $('#idBtnSimpanSimpan').click( function() { if ($('#idPenerbit').val().length == 0 || $('#idtrainingName').val().length == 0) { alert("ISI SEMUA FORM TERLEBIH DAHULU"); } else { debugger; var vDatasertifikasi = $('#idFrmAddSertifikasi') .serialize(); alert(vDatasertifikasi); debugger; $.ajax({ url: '/savesertifikasi', type: 'POST', data: vDatasertifikasi, dataType: "json", success: function(model) { debugger; if (model.status == "berhasil") { alert("Data berhasil disimpan"); $('#idMdlNewSertifikasi').modal('hide'); /* redirecting to home of barang */ debugger; } else { alert("Data salah"); } }, error: function(model) { debugger; } }); } }); $(".clSelectKiri").change(function() { if ($('#idTahunBerlaku').val().length == 0 && $('#idBulanBerlaku').val().length == 0) { $(".clTgglKanan").attr("disabled", "disabled"); } else { $(".clTgglKanan").removeAttr("disabled"); } }).trigger("change");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="form-horizontal" id="idFrmAddSertifikasi" method="post"> <div class="row"> <div class="col-sm-12"> <div class="row"> <!-- LEVEL 1 / KIRI --> <div class="col-xs-8 col-sm-6"> <div class="col-xs-12"> <label for="SertifikasiName" class="control-label">Nama Sertifikasi<sup>*</sup> </label> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control clborderbiru" maxlength="50" id="idtrainingName" name="certificate_name" placeholder="" title="MAKS. KARAKTER 50"> </div> </div> </div> <div class="col-xs-12 col-sm-12"> <label for="schoolName" class="control-label">Berlaku Mulai</label> <div class="row"> <div class="col-xs-8 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clborderbiru clSelectKiri" id="idBulanBerlaku" name="valid_start_month"> <option value="" disabled selected hidden>- Pilih Bulan -</option> </select> </div> </div> </div> <div class="col-xs-4 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clborderbiru clSelectKiri" id="idTahunBerlaku" name="valid_start_year"> <option value="" disabled selected hidden>- Pilih Tahun -</option> </select> </div> </div> </div> </div> </div> </div> <!-- LEVEL 2 / KANAN --> <div class="col-xs-4 col-sm-6"> <div class="col-xs-12"> <label for="organizer" class="control-label">Penerbit<sup>*</sup></label> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control clborderbiru" id="idPenerbit" name="publisher" placeholder=""> </div> </div> </div> <div class="col-xs-12 col-sm-12"> <label for="schoolName" class="control-label">Berlaku Sampai</label> <div class="row"> <div class="col-xs-8 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clTgglKanan clborderbiru" id="idBulanBerlakuS" name="until_month"> <option value="" disabled selected hidden>- Pilih Bulan -</option> </select> </div> </div> </div> <div class="col-xs-4 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clTgglKanan clborderbiru" id="idTahunBerlakuS" name="until_year"> <option value="" disabled selected hidden>- Pilih Tahun -</option> </select> </div> </div> </div> </div> </div> </div> </div> <div class="col-xs-12"> <label for="notes" class="control-label">Catatan</label> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control clborderbiru" id="idCatatan" rows="6" name="notes"></textarea> </div> </div> </div> <div class="col-md-offset-10"> <div class="btn-group"> <button type="button" class="btn clBtnMdl">Batal</button> <button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button> </div> </div> </div> </div> </form>

當我在 .clSelectKiri 值長度 == 0 中選擇一個值時，我希望禁用 .clTgglKanan。 還有一個隱藏選項，這會影響它嗎？ 這是我一直在工作的代碼，但它不起作用。 有誰知道為什么？

Answer 1

在禁用較低兩個select元素的if語句中，您只需將.val().length == 0更改為.val ，這將在選擇前兩個元素時禁用它們。

 var start = 2010; var end = 2030; var options = ""; for (var year = start; year <= end; year++) { options += "<option>" + year + "</option>"; } document.getElementById("idTahunBerlaku").insertAdjacentHTML( "beforeend", options); var start = 1; var end = 12; var options = ""; for (var month = start; month <= end; month++) { options += "<option>" + month + "</option>"; } document.getElementById("idBulanBerlaku").insertAdjacentHTML( "beforeend", options); var start = 2010; var end = 2030; var options = ""; for (var year = start; year <= end; year++) { options += "<option>" + year + "</option>"; } document.getElementById("idTahunBerlakuS").insertAdjacentHTML( "beforeend", options); var start = 1; var end = 12; var options = ""; for (var month = start; month <= end; month++) { options += "<option>" + month + "</option>"; } document.getElementById("idBulanBerlakuS").insertAdjacentHTML( "beforeend", options); $('#idBtnSimpanSimpan').click( function() { if ($('#idPenerbit').val().length == 0 || $('#idtrainingName').val().length == 0) { alert("ISI SEMUA FORM TERLEBIH DAHULU"); } else { debugger; var vDatasertifikasi = $('#idFrmAddSertifikasi') .serialize(); alert(vDatasertifikasi); debugger; $.ajax({ url: '/savesertifikasi', type: 'POST', data: vDatasertifikasi, dataType: "json", success: function(model) { debugger; if (model.status == "berhasil") { alert("Data berhasil disimpan"); $('#idMdlNewSertifikasi').modal('hide'); /* redirecting to home of barang */ debugger; } else { alert("Data salah"); } }, error: function(model) { debugger; } }); } }); $(".clSelectKiri").change(function() { if ($('#idTahunBerlaku').val() && $('#idBulanBerlaku').val()) { $(".clTgglKanan").attr("disabled", false); } else { $(".clTgglKanan").attr("disabled", true); } }).trigger("change");

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form class="form-horizontal" id="idFrmAddSertifikasi" method="post"> <div class="row"> <div class="col-sm-12"> <div class="row"> <!-- LEVEL 1 / KIRI --> <div class="col-xs-8 col-sm-6"> <div class="col-xs-12"> <label for="SertifikasiName" class="control-label">Nama Sertifikasi<sup>*</sup> </label> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control clborderbiru" maxlength="50" id="idtrainingName" name="certificate_name" placeholder="" title="MAKS. KARAKTER 50"> </div> </div> </div> <div class="col-xs-12 col-sm-12"> <label for="schoolName" class="control-label">Berlaku Mulai</label> <div class="row"> <div class="col-xs-8 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clborderbiru clSelectKiri" id="idBulanBerlaku" name="valid_start_month"> <option value="" disabled selected hidden>- Pilih Bulan -</option> </select> </div> </div> </div> <div class="col-xs-4 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clborderbiru clSelectKiri" id="idTahunBerlaku" name="valid_start_year"> <option value="" disabled selected hidden>- Pilih Tahun -</option> </select> </div> </div> </div> </div> </div> </div> <!-- LEVEL 2 / KANAN --> <div class="col-xs-4 col-sm-6"> <div class="col-xs-12"> <label for="organizer" class="control-label">Penerbit<sup>*</sup></label> <div class="form-group"> <div class="col-sm-12"> <input type="text" class="form-control clborderbiru" id="idPenerbit" name="publisher" placeholder=""> </div> </div> </div> <div class="col-xs-12 col-sm-12"> <label for="schoolName" class="control-label">Berlaku Sampai</label> <div class="row"> <div class="col-xs-8 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clTgglKanan clborderbiru" id="idBulanBerlakuS" name="until_month"> <option value="" disabled selected hidden>- Pilih Bulan -</option> </select> </div> </div> </div> <div class="col-xs-4 col-sm-6"> <div class="form-group"> <div class="col-sm-12"> <select class="form-control clTgglKanan clborderbiru" id="idTahunBerlakuS" name="until_year"> <option value="" disabled selected hidden>- Pilih Tahun -</option> </select> </div> </div> </div> </div> </div> </div> </div> <div class="col-xs-12"> <label for="notes" class="control-label">Catatan</label> <div class="form-group"> <div class="col-sm-12"> <textarea class="form-control clborderbiru" id="idCatatan" rows="6" name="notes"></textarea> </div> </div> </div> <div class="col-md-offset-10"> <div class="btn-group"> <button type="button" class="btn clBtnMdl">Batal</button> <button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button> </div> </div> </div> </div> </form>