title: Awesome Bootstrap Checkboxes for Bootstrap Multiselect
body: <p>I'm using <a href="http://davidstutz.github.io/bootstrap-multiselect/" rel="nofollow noreferrer">http://davidstutz.github.io/bootstrap-multiselect/</a> and I wanted to style my checkboxes (<a href="http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/" rel="nofollow noreferrer">http://flatlogic.github.io/awesome-bootstrap-checkbox/demo/</a>) ... BUT for some reason I can't change it to the required html structure. </p>
  
  <p>The default Bootstrap Multiselect HTML:</p>
  
  <pre><code>&lt;ul class="multiselect-container dropdown-menu"&gt;
      &lt;li class="active"&gt;
          &lt;div class="checkbox"&gt;
              &lt;label class="checkbox"&gt;
                  &lt;input value="AD" type="checkbox"&gt; Andorra (AD)
              &lt;/label&gt;
          &lt;/div&gt;
      &lt;/li&gt;
      ...
  </code></pre>
  
  <p>That's how it should be e.g.</p>
  
  <pre><code>&lt;ul class="multiselect-container dropdown-menu"&gt;
      &lt;li class="active"&gt;
          &lt;div class="checkbox"&gt;
              &lt;input id="multiselect-0" value="vikings" type="checkbox"&gt;
              &lt;label class="checkbox" for="multiselect-0"&gt; Minnesota Vikings&lt;/label&gt;
          &lt;/div&gt;
      &lt;/li&gt;
  </code></pre>
  
  <p>That's how I initialize it: </p>
  
  <pre><code>$('.test-select').multiselect({
      templates: { // Use the Awesome Bootstrap Checkbox structure
          li: '&lt;li&gt;&lt;div class="checkbox"&gt;&lt;label&gt;&lt;/label&gt;&lt;/div&gt;&lt;/li&gt;'
      }   
  });
  </code></pre>
  
  <p>That's how I wanted to change the structure: </p>
  
  <pre><code>$('.multiselect-container div.checkbox').each(function (index) {
  
      var id = 'multiselect-' + index,
          $input = $(this).find('input');
  
      $(this).find('label').attr('for', id);  
      $input.attr('id', id);
  
      $input.detach();
  
      $input.prependTo($(this));
  
      $(this).click(function (e) {
          e.stopPropagation();
      });
  
  }); 
  </code></pre>
  
  <p>I got this from here: <a href="http://jsfiddle.net/natearmagost/aznvcLps/" rel="nofollow noreferrer">http://jsfiddle.net/natearmagost/aznvcLps/</a> Anyone an idea why it might not be working on my side or an alternative how to do so? </p>
  
  <p>The below solution works, but unfortunately not yet if I load the options via $.ajax get and rebuild the multiselect. Anybody an idea why?</p>
  
  <pre><code>$.ajax({
  type: 'GET',
  url: '/country.php',
  dataType: 'json',
  success: function(data) {
       $.each(data.data, function (i, item) {
           display = item.display;
           $('.select-country').append('&lt;option value="' + display + '"&gt;(' + display + ')&lt;/option&gt;');
           //console.log(item)
      });
      $('.select-country').multiselect('rebuild');
  }
  });
  </code></pre>