Awesome Bootstrap Checkboxes for Bootstrap Multiselect
<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>