bootstrap-checkbox

A checkbox component based on bootstrap framework

Author

Usage

Create your <input type="checkbox"> with the .checkbox class.

<input type="checkbox" class="checkbox" />
<input type="checkbox" class="checkbox" checked="checked"/>
<input type="checkbox" class="checkbox" disabled="disabled"/>
<input type="checkbox" class="checkbox" checked="checked" disabled="disabled"/>

Enable Bootstrap-checkbox via JavaScript:

$('.checkbox').checkbox();

Or just

$('input[type="checkbox"]').checkbox();

You obtain:

Options

Options can be passed via data attributes or JavaScript.

$('input[type="checkbox"]').checkbox({
   buttonStyle: 'btn-link',
   buttonStyleChecked: 'btn-inverse',
   checkedClass: 'icon-check',
   uncheckedClass: 'icon-check-empty',
   constructorCallback: null,
   defaultState: false,
   defaultEnabled: true,

   checked: false,
   enabled: true
});

You can append or prepend a label via the data-label or data-label-prepend attribute.

With constructorCallback, you can access (in order) at original input checkbox, created button, created label and created prepended label

With defaultState and defaultEnabled you can set a default state (checked or not) and a default abilitation on reset of the form

Methods

$('input[type="checkbox"]').checkbox('click'); // change input's state
$('input[type="checkbox"]').checkbox('toggleEnabled'); // change input's enabled

Examples

Normal usage

$('input[type="checkbox"]').checkbox();

With Font-Awesome

$('input[type="checkbox"]').checkbox({
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

Size

<input type="checkbox" class="mini" />
<input type="checkbox" class="small"/>
<input type="checkbox" class="normal"/>
<input type="checkbox" class="large"/>

$('input[type="checkbox"].mini').checkbox({
    buttonStyle: 'btn-link btn-mini',
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

$('input[type="checkbox"].small').checkbox({
    buttonStyle: 'btn-link btn-small',
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

$('input[type="checkbox"].normal').checkbox({
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

$('input[type="checkbox"].large').checkbox({
    buttonStyle: 'btn-link btn-large',
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

Labels

<input type="checkbox" data-label="suffix"/>
<input type="checkbox" data-label-prepend="prefix"/>
<input type="checkbox" data-label="suffix" data-label-prepend="prefix"/>

$('input[type="checkbox"]').checkbox({
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

Button Style

<input type="checkbox" class="style1"/>
<input type="checkbox" class="style2"/>
<input type="checkbox" class="style3"/>

$('input[type="checkbox"].style1').checkbox({
	buttonStyleChecked: 'btn-success',
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});
$('input[type="checkbox"].style2').checkbox({
    buttonStyle: 'btn-base',
    buttonStyleChecked: 'btn-success',
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});
$('input[type="checkbox"].style3').checkbox({
    buttonStyle: 'btn-danger',
	buttonStyleChecked: 'btn-success',
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

Form reset

<input type="checkbox" class="reset-data" data-defalut-state="true"/>
<input type="checkbox" class="reset-data" data-defalut-enabled="false"/>
<input type="checkbox" class="reset-state"/>
<input type="checkbox" class="reset-enabled"/>

$('input[type="checkbox"].reset-data').checkbox({
	checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});
$('input[type="checkbox"].reset-state').checkbox({
    defalutState:true,
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});
$('input[type="checkbox"].reset-enabled').checkbox({
    defalutEnabled:false,
    checkedClass: 'icon-check',
    uncheckedClass: 'icon-check-empty'
});

Visitors

Loading data...

Copyright and license

Licensed under the MIT license.