1

我试图在选择一个选项后立即禁用同一 div 中的所有选项。我被困住了。

尝试使用onchange。但是每当我尝试禁用选择时，它要么全部要么没有，并且不在同一个父元素内（如 div 或表格行）

<div>

1: <select class="first">
<optgroup label="Div 1, select 1">
  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select><br />
2: <select class="second">
<optgroup label="Div 1, select 2">
  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select>
</div>
<div>
1: <select class="first">
<optgroup label="Div 2, select 1">

  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select><br />
2: <select class="second">
<optgroup label="Div 2, select 2">
  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select>
</div>


$('div option:selected').closest(select).attr('disabled','disabled');

塞纳里奥：

http://jsfiddle.net/1keyup/no8abt0m/11/

非常感谢您提前

4

1 回答 1

2

我认为您需要单独处理主要 div。

$('.item1-first-div').on('change', function() {
  var value = $('.item1-first-div').val();
  if (value) {
    $('.item2-first-div').prop('disabled', true);
  } else {
    $('.item2-first-div').prop('disabled', false);
  }

});

$('.item1-second-div').on('change', function() {
  var value = $('.item1-second-div').val();
  if (value) {
    $('.item2-second-div').prop('disabled', true);
  } else {
    $('.item2-second-div').prop('disabled', false);
  }
});
* {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen-Sans, Ubuntu, Cantarell, 'Helvetica Neue', sans-serif
}

div {
  border: 1px solid red;
  background-color: rgba(255, 0, 0, 0.1);
  padding: 10px 15px;
  margin: 15px
}

select {
  padding: 5px 7px;
}

.first {
  margin-bottom: 20px
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div>

  1: <select class="first item1-first-div">
<optgroup label="Div 1, select 1">
  <option value="">...</option>
  <option>1.1</option>
  <option>1.2</option>
  </optgroup>
</select><br /> 2: <select class="second item2-first-div">
<optgroup label="Div 1, select 2">
  <option value="">...</option>
  <option>1.1</option>
  <option>1.2</option>
  </optgroup>
</select>
</div>
<div>
  1: <select class="first item1-second-div">
<optgroup label="Div 2, select 1">

  <option value="">...</option>
  <option value="1-1">1.1</option>
  <option value="1-2">1.2</option>
  </optgroup>
</select><br /> 2: <select class="second item2-second-div">
<optgroup label="Div 2, select 2">
  <option value="">...</option>
  <option value="2-1">1.1</option>
  <option value="2-2">1.2</option>
  </optgroup>
</select>
</div>

于 2019-01-19T15:17:56.840 回答