bootstrap-checkbox

A checkbox component based on bootstrap framework

Author

Roberto Montresor

Documentation

You can find demo and documentation here.

Usage

Remember to include both the .js and the .css in your HTML header.

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();

Options

Options can be passed via data attributes or JavaScript.

$('input[type="checkbox"]').checkbox({
  buttonStyle: 'btn-link',
  buttonStyleChecked: 'btn-inverse',
  checkedClass: 'fa fa-check',
  uncheckedClass: 'fa fa-square-o',
  defaultState: false,
  defaultEnabled: true,
  
  checked: false,
  enabled: true
});

You can append or prepend a label via the data-label or data-label-prepend attribute. You can set a default state (used when you reset a form) via the data-default-state attribute. You can set a default abilitation (used when you reset a form) via the data-default-enabled attribute.

Methods

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

Copyright and license

Copyright (C) 2014 Roberto Montresor

Licensed under the Apache License 2.0.