select-to-checkbox

Convert select element to checkboxes or radio buttons jQuery plugin.

JSFiddle

Easily change the look and feel of HTML <select> elements:

• options of a single <select> displayed as radio buttons.
• options of a multiple <select> displayed as checkboxes.
• ability to programmatically select, deselect, enable and disable options.

Uses Bootstrap classes for styling. Easily modify CSS to match your theme.

Usage

1. Load jQuery, Bootstrap, and the plugin bundle in your HTML code.

   <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"/>
   ...
   <link rel="stylesheet" href="select_to_checkbox.css"/>
   <script src="select-to-checkbox-bundle.min.js"></script>

2. Define a <select> element with a name attribute in your HTML code. Supported optional attributes: multiple - enables multiple option selection and will display checkboxes; disabled - disables the dropdown.
3. Define <option>'s with unique value attributes. Supported optional attributes: label - alternate display text; selected - pre-select this option; disabled - disable this option.

   <form>
     ...
     <select multiple id="pets" name="pets">
       <option value="0">Doge</option>
       <option value="1" selected>Keyboard Cat</option>
       <option value="2" label="Badger" disabled>Badger Badger Badger</option>
       ...

4. Use jQuery to target the <select> and apply the plugin. The HTML is replaced by the plugin in the DOM.

   <script>
     $(function () {
       $('#pets').selectToCheckbox();
     });
   </script>

5. Or append the class stc to the select element and have it be targeted automatically.

   <select class="stc" multiple id="pets" name="pets">

Options

The following indexed parameters can be passed to selectToCheckbox() at construction.

• allowEnablingAndDisabling - whether programmatically toggling disabled is permitted. default=true
• items - array of additional items to append to options in group. Each array entry should have the form:
  

  [label:string, value:string, selected?=false, disabled?=false]

API

The following methods are exposed on the plugin:

• hasOption(value:string) - returns true if the option with the specified value attribute exists, otherwise false.
• selectOption(value:string) - selects the option with the specified value attribute, otherwise does nothing if it does not exist or if it is disabled.
• deselectOption(value:string) - deselects the option with the specified value attribute, otherwise does nothing if it does not exist or if it is disabled.
• isOptionSelected(value:string) - returns true if the option with the specified value attribute exists and is selected, otherwise false.
• enableOption(value:string) - enables the option with the specified value attribute, otherwise does nothing if it does not exist or if enabling is not permitted.
• disableOption(value:string) - disables the option with the specified value attribute, otherwise does nothing if it does not exist or if disabling is not permitted.
• isOptionDisabled(value:string) - returns true if the option with the specified value attribute exists and is disabled, otherwise false.
• enable() - enables this group, otherwise does nothing if enabling is not permitted.
• disable() - disables this group, otherwise does nothing if disabling is not permitted.
• getSelectedOptionsAsJson(includeDisabled=true) - returns a JSON string of the selected options' values.

The following global fields are exposed on the jQuery extension point:

• $.fn.selectToCheckbox.selector - the selector string used to automatically target and apply the plugin. default = "select.stc"
• $.fn.selectToCheckbox.applied - a collection of all element groups applied by the plugin.