javascript - Bootstrap Multi-sélection - ajout d'images après les cases à cocher

Tout d'abord, voici le fiddle

J'essaie d'ajouter une image après la case à cocher pour le plugin Bootstrap multi-select, après chaque case à cocher ou avant celle-ci j'essaie d'ajouter une miniature, voici ce que j'ai fait jusqu'à présent :

1. Ajouter des images directement dans chaque option mais ce plugin supprime tout le HTML
2. J'ai utilisé jquery after() pour ajouter une image après le champ, mais cela ne fonctionne pas.

Code HTML :

<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>

Code jQuery :

$(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')
                    }
                }
            });
        }
    });
});

Toute aide serait appréciée.

Réponse n°1

Vous pouvez utiliser l'option optionLabel

optionLabel Un rappel utilisé pour définir les étiquettes des 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

Réponse n°2

Vous pouvez essayer ceci :

$(function() {

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

  $('#btnget').click(function() {
    alert($('#chkveg').val());
  });
});

.multiselect-container>li>a>label {
  padding: 4px 20px 3px 20px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="http://davidstutz.de/bootstrap-multiselect/docs/js/bootstrap-3.3.2.min.js"></script>
<link href="http://davidstutz.de/bootstrap-multiselect/docs/css/bootstrap-3.3.2.min.css" rel="stylesheet"/>
<link href="http://davidstutz.de/bootstrap-multiselect/dist/css/bootstrap-multiselect.css" rel="stylesheet"/>
<script src="http://davidstutz.de/bootstrap-multiselect/dist/js/bootstrap-multiselect.js"></script>
<form id="form1">

  <div style="padding:20px">

    <select id="chkveg" multiple>
      <option value="cheese" data-img="100/109">AAA</option>
      <option value="tomatoes" data-img="100/108">BBB</option>
      <option value="mozarella" data-img="100/107">CCC</option>
      <option value="mushrooms" data-img="100/106">DDD</option>
      <option value="pepperoni" data-img="100/105">EEE</option>
      <option value="onions" data-img="100/110">FFF</option>
    </select>
    
    <br /><br />

    <input type="button" id="btnget" value="Get Selected Values" />

  </div>

</form>