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

【问题标题】：How do I disable a select option based on another select option?如何禁用基于另一个选择选项的选择选项？
【发布时间】：2019-07-15 10:36:42
【问题描述】：

我一直想知道是否可以根据另一个选择选项的值长度禁用一个选择选项。

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。还有一个隐藏选项，会影响它吗？ 这是我一直在工作的代码，但它不起作用。有人知道为什么吗？

【问题讨论】：

  • 我没有看到 .clSelectKiri 元素的value == 0。
  • $(".clTgglKanan option").attr("disabled", "disabled"); 你不能禁用整个选择元素，但你可以禁用选项。用户将无法选择任何选项
  • 您的选项没有值。测试.text 或像if(selectElement.selectedIndex === index){ otherSelect.selectedIndex = otherIndex; } 一样做
  • 哎呀对不起我的意思是值长度。如果 .clSelectKiri 的值长度为 0，它将被禁用。如果 .clSelectKiri 的值长度大于 0 .clTgglKanan 将能够。
  • 像@StackSlave 一样，您的选项没有价值。您是否要测试选项文本的长度？

标签： javascript jquery ajax


【解决方案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>

【讨论】：

  • 哇，谢谢！我希望它比你所做的相反。但是我已经用你的方式解决了它，只是改变了 if 语句！非常感谢！
  • @PiPio 哦，好的。因此，当页面加载时，您希望较低的两个选择从禁用开始，然后仅在选择前两个时才启用？
  • @PiPio 我刚刚编辑了我的答案。请告诉我它现在是否正在做你想做的事情。
猜你喜欢
  • 2016-10-06
  • 2021-09-10
  • 2012-01-30
  • 1970-01-01
  • 1970-01-01
  • 2020-12-28
  • 2017-08-08
  • 1970-01-01
  • 1970-01-01
相关资源
最近更新 更多
热门标签
Java Python linux javascript Mysql C# Docker 算法 前端 SpringBoot Redis Vue spring 设计模式 .net core .net kubernetes c++ 数据库 数据结构 大数据 js 机器学习 微服务 Android Go 程序员 面试 JVM ASP.net core 云原生 人工智能 后端 PHP git CSS golang k8s Nginx Django mybatis 深度学习 多线程 React 架构 devops 爬虫 云计算 Spring Boot LeetCode