Dependent selects value change和disable attr on change

Question

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

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

我需要如果用户在#no2, then #no3,#no4,#no5,#no6,#no7,#no8,#no9,#no10 disable attr中选择" Empty“成为真，并且选择的值被设置为空。

另外，我想知道是否有一种方法可以简化脚本，特别是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

实现这一点的干式方法是对所有select元素使用相同的class。然后，您可以检索引发事件的事件的索引，并根据选定的值禁用/启用以下所有事件。试试这个：

​

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

​