# Checkbox A jQuery plugin for replacing checkboxes. * [Use](#use) * [Options](#options) * [Methods](#methods) * [CSS](#css) ## Use #### Main ```markup checkbox.js checkbox.css ``` #### Dependencies ```markup core.js touch.js ``` ### Basic Checkbox will automatically detect the input's type and render proper styles. ```javascript $("input[type=checkbox], input[type=radio]").checkbox(); ``` ```markup
``` ### Toggle Checkbox can also render a 'toggle' style checkbox. ```javascript $("input[type=checkbox]").checkbox({ toggle: true }); ``` ## Options Set instance options by passing a valid object at initialization, or to the public `defaults` method. Custom options for a specific instance can also be set by attaching a `data-checkbox-options` attribute to the target elment. This attribute should contain the properly formatted JSON object representing the custom options. | Name | Type | Default | Description | | --- | --- | --- | --- | | `customClass` | `string` | `''` | Class applied to instance | | `toggle` | `boolean` | `false` | Render 'toggle' styles | | `labels.on` | `string` | `'ON'` | Label for 'On' position; 'toggle' only | | `labels.off` | `string` | `'OFF'` | Label for 'Off' position; 'toggle' only | ## Methods Methods are publicly available to all active instances, unless otherwise stated. ### disable Disables target instance ```javascript $(".target").checkbox("disable"); ``` ### enable Enables target instance ```javascript $(".target").checkbox("enable"); ``` ### update Updates target instance ```javascript $(".target").checkbox("update"); ``` ## CSS | Class | Type | Description | | --- | --- | --- | | `.fs-checkbox-element` | `element` | Target elmement | | `.fs-checkbox` | `element` | Base widget class | | `.fs-checkbox.fs-checkbox-checked` | `modifier` | Indicates checked state | | `.fs-checkbox.fs-checkbox-radio` | `modifier` | Indicates radio interface | | `.fs-checkbox.fs-checkbox-toggle` | `modifier` | Indicates toggle interface | | `.fs-checkbox.fs-checkbox-focus` | `modifier` | Indicates focused state | | `.fs-checkbox.fs-checkbox-disabled` | `modifier` | Indicates disabled state | | `.fs-checkbox-enabled` | `modifier` | Indicates enabled state | | `.fs-checkbox-label` | `element` | Label element | | `.fs-checkbox-marker` | `element` | Marker element | | `.fs-checkbox-flag` | `element` | Flag element |