禁用“引导多选择”中的特定复选框

Question

目前，我有工作的boostrap-multiselect，但我想最大限度地利用这个插件。

我想禁用a 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"来解决这个问题。在我的解决方案建议中，与当前选择的选项不同的组的每个选项都将被禁用。因此，如果您需要更多的组，您可以相对自由地将这些选项分配给组。

​

$(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>

​