This plugin turns an ordinary HTML select control into elegant drop down list of checkboxes, stylable with ThemeRoller.
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9 Option 10 Option 11 Option 12
Options one, three, and four have the selected="selected" attribute and are checked by default. Options five and six have the disabled="disabled" attribute. The original select input has an inline-CSS width of 300px, which the MultiSelect widget inherits.
selected="selected"
disabled="disabled"
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7 Option 8 Option 9
The "Toggle Disable" button simply toggles the class ui-state-disabled on the select. It does NOT use the disabled attribute because of bug #6211. Be aware of this because the checkboxes might still be passed to the server when the widget is disabled.
Option 1 Option 2 Option 3 Option 4 Option 5 Toggle Disabled
NOTE: This widget is designed to operate like normal HTML select boxes. Therefore, clicking on the document or on another select will close all other open selects.
Option 1 Option 2 Option 3 Option 4 Option 5
Click on an optgroup's heading to toggle the checked state of the entire group.
Option 1 Option 2 Option 3 Option 4 Option 5 Option 6 Option 7
Callback target
A function is passed to the selectedText parameter which returns a list of the items selected, as long as 5 or less checkboxes are checked. Once 5 or more checkboxes have been checked, selectedText returns the number checked. minWidth is set to 400 (pixels).
selectedText
minWidth
Option 1 Option 2 Option 3 Option 4 Option 5 Option 1 Option 2 Option 3 Option 4 Option 5 Option 1 Option 2 Option 3 Option 4 Option 5
This is a quick way to force only one option being chosen. The multiple and showHeader options are set to false, with a custom selectedText callback.
multiple
showHeader