JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/css/bootstrap-multiselect.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-multiselect/0.9.13/js/bootstrap-multiselect.js"></script>
<select id="one" multiple="multiple">
    <option value="1">One</option>
    <option value="2">Two</option>
    <option value="3">Three</option>
</select>

<select id="two" multiple="multiple">
    <option data-group="1" value="OneA" disabled >One A</option>
    <option data-group="1" value="OneB" disabled>One B</option>
<option data-group="2" value="TwoA" disabled>Two A</option>
<option data-group="2" value="TwoB" disabled>Two B</option>
    <option data-group="3" value="ThreeA" disabled >Three A</option>
</select>

CSS

.multiselect-container > li.disabled {
  display:none;
}

JavaScript

$(document).ready(function() {
        $('#one').multiselect({
            onChange: function(element, checked) {
            var opts = $('*[data-group="'+ element.val() +'"]');
            console.log(opts);
                if (checked === true) {
                    opts.prop('disabled', false).prop('selected', false);
                }
                else if (checked === false) {
									opts.prop('disabled', true).prop('selected', false);
                }
                $("#two").multiselect('refresh');
            }
        });
        $('#two').multiselect();
    });