A simple javascript thing that turns ugly multiselects into shiny checkbox fields, using Backbone, Handlebars and jQuery.
Finally a way to select multiple things that users can understand and you can easily work with!
A multiselect field is the most confusing HTML widget ever envisioned. Everybody gets confused by them.
A bunch of checkboxes look better, but they are difficult for the backend developer to handle.
Combining the two gives us the best of both worlds. Users see a field of checkboxes and they are submitted as a single form field.
Using checkbox-field is just calling a function! Or you can customise it a little bit.
$("#my_selector").checkboxField();
// there are also some options
$("#my_selector").checkboxField({
// a handlebars template for the checkboxes (default: #checkbox-template)
template: "#checkbox-template",
// placeholder for checkboxes (default: one is created)
checkboxes: null,
// hide the original multiselect or not (default: yup)
hide: true
// display "select all" (default: true)
show_select_all: true
// labels for select_all control
select_all: "Select all",
deselect_all: "Deselect all"
});
<div id="checkbox-template"
style="display:none">
<div style="display:inline-block">
<input type="checkbox"
id="checkbox_{{id}}" />
<label for="checkbox_{{id}}">
{{label}}
</label>
</div>
</div>