Awesome Bootstrap Checkboxes with Bootstrap Multiselect

A hack to get Awesome Bootstrap Checkboxes working with the Bootstrap Multiselect dropdown

by Shree Khanal

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>
<link rel="stylesheet" href="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/css/bootstrap-multiselect.css">
<script src="https://rawgit.com/davidstutz/bootstrap-multiselect/master/dist/js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="https://rawgit.com/flatlogic/awesome-bootstrap-checkbox/master/awesome-bootstrap-checkbox.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
<div class="form-group">
  <label for="teams">Choose a team:</label>
  <br/>
  <select id="teams" multiple="multiple">
    <option value="vikings">Minnesota Vikings</option>
    <option value="packers">Green Bay Packers</option>
    <option value="lions">Detroit Lions</option>
    <option value="bears">Chicago Bears</option>
    <option value="patriots">New England Patriots</option>
    <option value="jets">New York Jets</option>
    <option value="bills">Buffalo Bills</option>
    <option value="dolphins">Miami Dolphins</option>
  </select>
</div>
<input type="button" id="btnget" value="Save" />

CSS

body {
  padding: 20px;
}

.multiselect-container div.checkbox {
  margin: 0;
}

.multiselect-container label {
  margin: 0;
  white-space: nowrap;
}

.multiselect-container div.checkbox {
  padding: 5px 15px 5px 35px;
}

JavaScript

$(document).ready(function() {
  $('#teams').multiselect();

  $('#btnget').click(function() {
    var itemArray = new Array();
    var item = $('#teams').val();
    alert(item);
   })
});