Bootstrap-multiselect: CSS checkboxes using Fontawesome

[bartclaeys]

Hello, I would like to customize the look of checkboxes with CSS icons using Fontawesome (technique demonstrated at: https://github.com/flatlogic/awesome-bootstrap-checkbox). Now, the problem is, this is not possible with the following markup, currently being used by bootstrap-multiselect:

<label class="checkbox">
    <input type="checkbox" value="9">
    My item
</label>

In order to support this 'hack', the formatting needs to be:

<input type="checkbox" value="9" id='mycheckbox'>
<label for='mycheckbox'>
    My item
</label>

How easy is it to change this without having to hack into the core script?

[natearmagost]

I wanted to do the same thing. As far as I know you can't get the HTML structure that Awesome Bootstrap Checkbox wants just by setting plugin options.

I ended up initializing the plugin with a custom li template that matched the Awesome Bootstrap Checkbox structure.

templates: {
  li: '<li><div class="checkbox"><label></label></div></li>'
}

After the plugin is initialized the dropdown needs a bit more jQuery work to add for/id attribute pairs to the labels/inputs and move the inputs before the labels. A bit of custom CSS might be needed as well.

Here is a working Fiddle with vanilla Bootstrap, the Bootstrap Multiselect plugin, and the Awesome Bootstrap Checkbox CSS:
http://jsfiddle.net/natearmagost/aznvcLps/

That is just for a basic dropdown. Dropdowns with optgroups, radios, etc. may take a bit more work. But the main script is not modified.

[davidstutz]

Added this to the FAQ, thanks.

[bhumiradixweb]

Hello Team,

Can i use this like

 data-templates-li='<li><div class="checkbox"><label></label></div></li>'

for selectbox?

Thanks