禁用 Bootstrap Multi select 中的特定复选框

Question

目前我正在工作boostrap-multiselect但我想最大限度地使用这个插件。

我想禁用一个specific option，如果我点击certain option

$(function() {

  $('#chkveg').multiselect({
    includeSelectAllOption: true
  });
  
  $('#chkveg').change(function() {
  
      var result = $('#chkveg').val();
      var frame = result.includes("FRAMEX");
      var liner = result.includes("LINERX");
      var prints = result.includes("PRINTSX");
      
      if( frame != "" || liner != "") {
        alert("Disable Prints");
      } else if(prints != "") {
        alert("Disable Frame & Liner");
      }
  
  });
  
});

<select id="chkveg" multiple="multiple" class="">
      <option value="FRAMEX">Frame</option>
      <option value="LINERX">Liner</option>
      <option value="PRINTSX">Prints</option>
</select>


<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

如果我单击 Frame or Liner，Prints 选项应该被禁用。

和

如果我点击 Prints，Frame and Liner 应该被禁用

Answer 1

首先，我认为打开选项includeSelectAllOption没有意义，因为它与禁用某些选项的逻辑相矛盾。

我会通过动态保持它并向 select 的每个选项添加一个属性 data-group="1" 来解决它。在我的解决方案提案中，与当前 selected 选项不同的组中的每个选项都将被禁用。所以如果你需要更多的组，你可以相对自由地分配选项到组。

$(function() {

  $('#chkveg').multiselect({
    onChange: onChangeChkveg
  });

  function onChangeChkveg(option, checked) {
    var groups = [],
      parentElement = option.parent(),
      allOptions = parentElement.find('option'),
      allOptionsLength = allOptions.length,
      groupLength, element, currentGroup, i;

    for (i = 0; i < allOptionsLength; i++) {
      element = $(allOptions[i]);
      currentGroup = element.data('group');

      if (typeof groups[currentGroup] === 'undefined' || groups[currentGroup] === false) {
        groups[currentGroup] = element.prop('selected');
      }
    }

    groupLength = groups.length;

    for (i = 0; i < groupLength; i++) {
      if (groups[i] === true) {
        parentElement.find('option[data-group="' + i + '"]').prop('disabled', false);
        parentElement.find('option[data-group!="' + i + '"]').prop('disabled', true);
        break;
      }

      if (i == groupLength - 1) {
        parentElement.find('option').prop('disabled', false);
      }
    }

    parentElement.multiselect('refresh');
  }

});

<select id="chkveg" multiple="multiple" class="">
  <option value="FRAMEX" data-group="1">Frame</option>
  <option value="LINERX" data-group="1">Liner</option>
  <option value="PRINTSX" data-group="2">Prints</option>
</select>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<link href="https://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet" />
<link href="https://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet" />
<script src="https://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>

禁用 Bootstrap Multi select 中的特定复选框

Disable specific checkbox in Bootstrap Multi select

html

javascript

jquery

bootstrap-multiselect