First off, you can find the working example here
I'm attempting to insert an image after each checkbox for the Bootstrap multi-select plugin. I have tried a couple of methods so far:
- Adding images directly in each option, but the plugin removes all html.
- Using jQuery's after() method to add an image after the field, but it doesn't seem to work.
Here is the HTML code snippet:
<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>
And here is the jQuery code snippet:
$(document).ready(function() {
$('.multiselect').multiselect({
buttonWidth: 'auto',
numberDisplayed:15,
onChange: function(element, checked) {
$("ul.multiselect-container").find("input[type=checkbox]").each(function(){
var valueAttr = $(this).attr('value');
if (element.attr('value') == valueAttr) {
var checkParent = $(this).parent().parent().parent().hasClass('active');
if (checkParent == false) {
$(this).removeAttr('disabled')
}else{
$(this).attr('disabled','disabled')
}
}
});
}
});
});
Any assistance on this matter would be greatly appreciated.