Bootstrap Multiselect Skeleton

by Santosh Giridhara

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/css/bootstrap.css">
<link rel="stylesheet" href="http://davidstutz.github.io/bootstrap-multiselect/dist/css/bootstrap-multiselect.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.2/js/bootstrap.js"></script>
<script src="http://davidstutz.github.io/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<select id="contentTypesFilter" class="multiselect" multiple="multiple">
  <option value="1:5" data-servicetypeid="5">Apple Music - Student</option>
  <option value="8:5" data-servicetypeid="5">Apple Music - Individual Monthly</option>
  <option value="9:5" data-servicetypeid="5">Apple Music - Family Monthly</option>
  <option value="0:5" data-servicetypeid="5">Apple Music - Trial</option>
  <option value="3:5" data-servicetypeid="5">Apple Music - Carrier Trial 1</option>
  <option value="4:5" data-servicetypeid="5">Apple Music - Carrier Trial 2</option>
  <option value="6:5" data-servicetypeid="5">Music Subscription - Match</option>
  <option value="21:5" data-servicetypeid="5">Apple Music - Carrier Paid</option>
  <option value="31:5" data-servicetypeid="5">Apple Music - Carrier Trial 3</option>
  <option value="61:5" data-servicetypeid="5">Apple Music - Individual Annual</option>
  <option value="62:5" data-servicetypeid="5">Apple Music - Lyrics</option>
</select>

JavaScript

$(function() {
  $('.multiselect').multiselect({
    //includeSelectAllOption: true,
    //selectAllText: 'All Selected',
    //selectAllValue: -1,
    numberDisplayed: 1,
    maxHeight: 500,
    onInitialized: function(select, container) {

    },
    onChange: function(options, checked) {
      var txt = options.text();
      if (checked && txt.trim() === 'Music Subscription - Match') {
        $('.multiselect option:selected').each(function() {
          $(this).prop('selected', false);
        });
        $('select.multiselect').multiselect('select', options.val());
        $('select.multiselect').multiselect('refresh');
      } else {
        $('.multiselect option').each(function() {
	        if($(this).text() === 'Music Subscription - Match'){
          	$(this).prop('selected', false);
          }else{
	          $(this).prop('selected', true);
          }          
        });
        $('select.multiselect').multiselect('refresh');
      }
    }
  });

});