Disable specific checkbox in Bootstrap Multi select

Question

Currently I have working boostrap-multiselect but I want to maximize to use of this plugin.

I want to disable a specific option, If I click 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>

If I click either Frame or Liner, the Prints option should be disabled.

and

If I click Prints, the Frame and Liner should be disabled

Answer 1

First, I don't think it makes sense to turn the option includeSelectAllOption on, as it contradicts the logic of disabling certain options.

I would solve it by keep it dynamically and add an attribute data-group="1" to each option of the select. In my solution proposal, each option of a different group than the currently selected options will be disabled. So if you need more groups, you are relatively free to assign the options to groups.

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