如何基于另一个选择选项禁用选择选项？

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

在您的if语句中，禁用了下面的两个select元素，您只需要将.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>