Bootstrap Multi-select - adding images after checkboxes

Question

Firstly here's the fiddle

I'm trying to add image after the checkbox for Bootstrap multi-select plugin, after each check box or before it I'm trying to add a thumbnail, here's what I did till now:

1. Adding images directly in each option but this plugin removes all html in
2. Used jquery after() to add image after the field but it does not work.

HTML Code:

<div class="col-sm-12">
    <div id="vm" class="tab-pane fade in  active">
        <div class="panel panel-primary">
            <div class="panel-body">
                <form action="/Lab/Rtx/etabs/edit/0451483t" id="ServerEditForm" method="post" accept-charset="utf-8">
                <div style="display:none;">
                    <input type="hidden" name="_method" value="POST">
                </div>
                <div class="col-md-8">
                    <div class="form-group">
                        <input type="hidden" name="data[Server][0][id]" class="form-control" value="1" id="Server0Id">
                        <div class="controls">
                            <label for="Server0Vm">hosta0451483t</label>
                            <input type="hidden" name="data[Server][0][Vm]" value="" id="Server0Vm_">
                            <select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
                                <optgroup>
                                    <option value="ctrlr0451483t">ctrlr0451483t</option>
                                    <option value="ipr0451483t">ipr0451483t</option>
                                    <option value="ldap0451483t">ldap0451483t</option>
                                    <option value="proxy0451483t">proxy0451483t</option>
                                </optgroup>
                            </select>
                        </div>
                    </div>
                </div>
            </div>
            </form>
        </div>
    </div>
</div>

jQuery Code:

$(document).ready(function() {
    $('.multiselect').multiselect({
        buttonWidth: 'auto',
        numberDisplayed:15,
        onChange: function(element, checked) {
            //console.log(element.attr('value') + checked);
            $("ul.multiselect-container").find("input[type=checkbox]").each(function(){
                //console.log(element.attr('value'));
                var valueAttr = $(this).attr('value');
                if (element.attr('value') == valueAttr) {
                    var checkParent = $(this).parent().parent().parent().hasClass('active');
                    //console.log(checkParent);
                    if (checkParent == false) {
                        $(this).removeAttr('disabled')
                    }else{
                        $(this).attr('disabled','disabled')
                    }
                }
            });
        }
    });
});

Any help would be appreciated.

Answer 1

You can use optionLabel option

optionLabel A callback used to define the labels of the options

$('.multiselect').multiselect({
    enableHTML: true,
    optionLabel: function(element) {
        return '<img src="'+$(element).attr('data-img')+'"> '+$(element).text();
    },
    // ...
});

HTML:

<select name="data[Server][0][Vm][]" class="multiselect" multiple="multiple" id="Server0Vm">
    <optgroup>
        <option data-img="1.png" value="ctrlr0451483t">ctrlr0451483t</option>
        <option data-img="2.png" value="ipr0451483t">ipr0451483t</option>
        <option data-img="3.png" value="ldap0451483t">ldap0451483t</option>
        <option data-img="4.png" value="proxy0451483t">proxy0451483t</option>
    </optgroup>
</select>

JSFiddle