Search code examples
jquerytwitter-bootstrapbootstrap-multiselect

Bootstrap multiselect


I'm using David bootstrap multiselect http://davidstutz.github.io/bootstrap-multiselect/ and I can't find a way to disable label modification when checkboxes are checked.Eg. of my code:

<select  multiple="multiple" name="more[]" id="more">
    <option value="Centres d'intérêt">Centres d'intérêt</option>
    <option value="Concession">Concession</option>
    <option value="Délai d'achat">Délai d'achat</option>
    <option value="Usage">Usage</option>
    <option value="Financement">Financement</option>
</select>

and the JS:

$('#more').multiselect({
                    includeSelectAllOption: false,
                    preventInputChangeEvent: true,
                    enableFiltering: true,
                    numberDisplayed: 1000,
                    maxHeight: 300,
                    nonSelectedText: "<span class='label-m'>{{ tran('admin/contacts/table.more') }}</span>",
                    allSelectedText: "<span class='label-m'>{{ tran('admin/contacts/table.more') }}</span>",
                    enableCaseInsensitiveFiltering: true,
                    templates:{
                        button: '<button type="button" class="multiselect dropdown-toggle" data-toggle="dropdown"  data-placement="bottom"></button>'
                    },
                    onChange: function(option, checked, select) {

                    }
                });

And the prev how it looks and how it should look even when checkbox is checked

Edit: jsfiddle demo: http://jsfiddle.net/y7c9zus1/3/

Thank you for all your answers!


Solution

  • You can use a buttonText option:

    buttonText: function (options, select) {
        //you also can count the selected options here to do whatever you want
        return 'My fixed label';
    }
    

    http://jsfiddle.net/vcarvalho/y7c9zus1/4/