禁用多个 select 选项中的一个选项

Question

我在 BootStrap 中有多个 select 选项，我希望如果用户 select 的选项值=1，那么他们不能选择值=5 的选项，反之亦然

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

Answer 1

试一试。这不是微不足道的

记住从0开始的JS数字数组和集合，但我将值存储在所选数组中

const pairs = [, 5, 6, , 1]; // 1=5, 2=6 5:1
$(function() {
  $(".selectpicker").selectpicker()
  $(".selectpicker").on("changed.bs.select", function(e, clickedIndex, newValue, oldValue) {
    // const selected = $("option:selected", this).map((i, ele) => ele.value).get();
    $("option", this).prop("disabled", false); // enable all
    $("option:selected", this).each(function() { // disable selected pair
      const paired = pairs[$(this).val()];
      if (paired) {
        // if value i is among the selected, disable value pairs[i]
        console.log("value", this.value, "disable", paired)
        $(".selectpicker").find('option[value=' + paired + ']')
          .prop("selected", false)
          .prop("disabled", true);
      }
    });
    // refresh the select
    $('.selectpicker').selectpicker('refresh');
  });
});

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/css/bootstrap-select.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />

<select id="sel1" class="selectpicker" multiple>
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
  <option value="6">Six</option>
  <option value="7">Seven</option>
</select>

禁用多个 select 选项中的一个选项

Disable an option of multiple select options

jquery

drop-down-menu

bootstrap-4