禁用多个选择选项的选项答案

【问题标题】：Disable an option of multiple select options禁用多个选择选项的选项
【发布时间】：2020-05-12 14:14:27
【问题描述】：

我在 BootStrap 中有一个多选选项，如果用户选择选项 value=1，那么他们不能选择 value=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" />

【问题讨论】：

欢迎来到 Stack Overflow！请访问help center，使用tour 了解内容和How to Ask。做一些研究，搜索关于SO的相关主题；如果您遇到困难，请发布您的尝试的minimal reproducible example，并使用[<>] sn-p 编辑器记录输入和预期输出。发布代码，而不是代码图片
我给你做了一个sn-p。请将相关的 HTML 和 CSS 以及脚本粘贴到窗格中

标签： jquery drop-down-menu bootstrap-4

【解决方案1】：

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

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

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>

【讨论】：

感谢您的指导，如果我将它用于 value=2 和 value=6 它不起作用，你知道，value=1 与 value=5 相对，value=2 与 value=6 相对, value=3 反对 value=4
我不明白。您可以成对禁用所有选择，只知道必须禁用索引 1 才能禁用值 2。-
你知道我什么时候输入这个代码 $(".selectpicker").find('option').eq(5).prop("disabled", selected.indexOf("2") != 1); ，当我选择值 1 时，值 5 和 6 都会被禁用
这非常棘手。如果我选择 1（禁用 5）然后单击 4（禁用 1）会发生什么情况，然后我应该再次启用 5 吗？我的代码现在可以执行此操作，但您必须再次取消选择 4 才能启用 5。