从属选择值更改并在更改时禁用 attr

Question

我有一些依赖 select 的 ID 来自 #no1 to #no10。我想要实现的是清除链中所有可靠 select 的值。

例如，如果 #no1 有值，则 #no2 disabled attr 被删除，用户可以 select 一个值。 #no3 (if #no2 is not empty)、#no4 (if #no3 is not empty) 等也是如此。

如果 #no2, then #no3,#no4,#no5,#no6,#no7,#no8,#no9,#no10 中的用户 select "Empty" 禁用属性变为真并且 selected 值设置为空，我需要。

此外，我想知道是否有简化脚本的方法，尤其是 if 部分

我尝试过对每个元素使用 .click()，但似乎不正确。

$(document).on('change', '#no1,#no2,#no3,#no4,#no5,#no6,#no7,#no8,#no9,#no10', function select() {
  var no1 = $("#no1").val();
  var no2 = $("#no2").val();
  var no3 = $("#no3").val();
  var no4 = $("#no4").val();
  var no5 = $("#no5").val();
  var no6 = $("#no6").val();
  var no7 = $("#no7").val();
  var no8 = $("#no8").val();
  var no9 = $("#no9").val();

  if (no1 != null && no1 != "" && no1 != "Empty") {
    $('#no2').prop("disabled", false);
  } else {
    $('#no2').prop("disabled", true);
    $('#no2').val('Empty');
    $('#no3').val('Empty');
    $('#no2').val('Empty');
    $('#no2').val('Empty');
    $('#no2').val('Empty');
    $('#no2').val('Empty');
    $('#no2').val('Empty');
  }
  if (no2 != null && no2 != "" && no2 != "Empty") {
    $('#no3').prop("disabled", false);
  } else {
    $('#no3').prop("disabled", true);
    $('#no3').val('Empty');
  }
  if (no3 != null && no3 != "" && no3 != "Empty") {
    $('#no4').prop("disabled", false);
  } else {
    $('#no4').prop("disabled", true);
    $('#no4').val('Empty');
  }
  if (no4 != null && no4 != "" && no4 != "Empty") {
    $('#no5').prop("disabled", false);
  } else {
    $('#no5').prop("disabled", true);
    $('#no5').val('Empty');
  }
  if (no5 != null && no5 != "" && no5 != "Empty") {
    $('#no6').prop("disabled", false);
  } else {
    $('#no6').prop("disabled", true);
    $('#no6').val('Empty');
  }
  if (no6 != null && no6 != "" && no6 != "Empty") {
    $('#no7').prop("disabled", false);
  } else {
    $('#no7').prop("disabled", true);
    $('#no7').val('Empty');
  }
  if (no7 != null && no7 != "" && no7 != "Empty") {
    $('#no8').prop("disabled", false);
  } else {
    $('#no8').prop("disabled", true);
    $('#no8').val('Empty');
  }
  if (no8 != null && no8 != "" && no8 != "Empty") {
    $('#no9').prop("disabled", false);
  } else {
    $('#no9').prop("disabled", true);
    $('#no9').val('Empty');
  }
  if (no9 != null && no9 != "" && no9 != "Empty") {
    $('#no10').prop("disabled", false);
  } else {
    $('#no10').prop("disabled", true);
    $('#no10').val('Empty');
  }

});
$("#no1,#no2,#no3,#no4,#no5,#no6,#no7,#no8,#no9,#no10").click();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-2 col-sm-2">
    <div class="form-group">
      <span>Main carousel order</span>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no1">
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no2" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no3" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no4" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no5" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no6" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no7" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no8" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no9" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no10" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
</div>

Here is a Demo

Answer 1

实现此目的的 DRY 方法是在所有 select 元素上使用相同的 class。然后，您可以根据 selected 值检索引发事件的索引和 disable/enable 以下所有事件的索引。试试这个：

$(document).on('change', '.foo', function select() {
  let $select = $('.foo');
  let index = $select.index(this);
  let $next = $select.eq(index + 1)
  
  if (this.value == 'Empty') {
    $next.val('Empty');
    $select.filter(`:gt(${index})`).val('Empty').prop('disabled', true);
  } else {
    $next.prop('disabled', false)
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
  <div class="col-md-2 col-sm-2">
    <div class="form-group">
      <span>Main carousel order</span>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no1">
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no2" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no3" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no4" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no5" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no6" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no7" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control" id="no8" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no9" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
  <div class="col-md-1 col-sm-1">
    <div class="form-group">
      <select class="form-control foo" id="no10" disabled>
        <option selected>Empty</option>
        <option>1</option>
        <option>2</option>
        <option>3</option>
      </select>
    </div>
  </div>
</div>

从属选择值更改并在更改时禁用 attr

Dependent selects with value change and disable attr on change

jquery

drop-down-menu