Bootstrap multiselect

by Alvin Olavarrieta

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script src="https://raw.githubusercontent.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<div class="col-xs-12 col-sm-6">
    <div class="form-group required">
        <label for="" class="control-label">Computer Capability</label>
        <select class="form-control" multiple="multiple" id="computer">
            <option value="1">I have a Desktop at home</option>
            <option value="2">I have a Laptop at home</option>
            <option value="3">I have a Tablet (non iPad)</option>
            <option value="4">I have an iPad</option>
            <option value="5">I do not have a computer</option>
        </select>
        <span class="help-block">Required field</span>
    </div>
</div>

JavaScript

// Computer
$('#computer').multiselect({
    nonSelectedText: '',
    buttonWidth: '100%',
    buttonClass: 'btn btn-multiselect',
    numberDisplayed: 2,
    selectedClass: 'btn-multiselect-selected',

    onChange: function (option, checked) {
        // Get selected options.
        var selectedOptions = $('#computer option:selected');

        if (selectedOptions.val() == 1 || selectedOptions.val() == 2 || selectedOptions.val() == 3 || selectedOptions.val() == 4) {
            // Disable all other checkboxes.
            var nonSelectedOptions = $('#computer option').filter(function () {
                return $(this).val() == 5;
            });

            nonSelectedOptions.each(function () {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', true);
                input.parent().parent().parent('li').addClass('disabled');
            });
        }
        else if (selectedOptions.val() == 5) {
            // Disable all other checkboxes.
            var nonSelectedOptions = $('#computer option').filter(function () {
                return $(this).val() < 5;
            });

            nonSelectedOptions.each(function () {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', true);
                input.parent().parent().parent('li').addClass('disabled');
            });
        }
        else {
            // Enable all checkboxes.
            var dropdown = $('#computer').siblings('.multiselect-container');
            $('#computer option').each(function () {
                var input = $('input[value="' + $(this).val() + '"]');
                input.prop('disabled', false);
                input.parent().parent().parent('li').removeClass('disabled');
            });
        }
    }
});