JSFiddle - React, Tailwind, and code Playground

by Nathan Riley

HTML

<script src="https://app.odemglobal.com/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://app.odemglobal.com/css/bootstrap-multiselect.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script src="https://app.odemglobal.com/js/bootstrap.js"></script>
<form action="#" method="post">
<select id="stGoal" class="form-control" name="companyGoalST[]" required multiple="multiple">
    <option value="1">Build a CRM database</option>
    <option value="2">Generate awareness</option>
    <option value="3">Grow my followers</option>
    <option value="11">Educate consumers</option>
    <option value="12">Retain existing customers</option>
    <option value="13">Increase sales</option>
</select>
    <input type="submit" value="submit"/>
</form>

JavaScript

$(document).ready(function() {
        $('#stGoal').multiselect({
            nonSelectedText: 'Select Goal',
    		buttonWidth: '100%',
            onChange: function(option, checked) {
                // Get selected options.
                var selectedOptions = $('#stGoal option:selected');
 
                if (selectedOptions.length >= 2) {
                    // Disable all other checkboxes.
                    var nonSelectedOptions = $('#stGoal option').filter(function() {
                        return !$(this).is(':selected');
                    });
 
                    var dropdown = $('#stGoal').siblings('.multiselect-container');
                    nonSelectedOptions.each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', true);
                        input.parent('li').addClass('disabled');
                    });
                }
                else {
                    // Enable all checkboxes.
                    var dropdown = $('#stGoal').siblings('.multiselect-container');
                    $('#stGoal option').each(function() {
                        var input = $('input[value="' + $(this).val() + '"]');
                        input.prop('disabled', false);
                        input.parent('li').addClass('disabled');
                    });
                }
            }
        });
    });