Зависимый выбор с изменением значения и отключение атрибута при изменении

Question

У меня есть несколько зависимых селекторов с идентификаторами от #no1 to #no10. Я пытаюсь добиться очистки значения от всех надежных элементов выбора в цепочке. Например,

, если #no1 имеет значение, то #no2 отключенный атрибут удален, и пользователь может выбрать значение. То же самое происходит с #no3 (if #no2 is not empty), #no4 (if #no3 is not empty) и т. Д.

Мне нужно, если пользователь выберет «Пустой» в #no2, then #no3,#no4,#no5,#no6,#no7,#no8,#no9,#no10, отключить attr и станет выбранное значение Пустым.

Кроме того, мне интересно, есть ли способ упростить сценарий, особенно раздел if 1014 *

Я пытался использовать .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>

Вот демоверсия

Answer 1

Для достижения этой цели DRY необходимо использовать одинаковые 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>