Bootstrap-checkbox

A checkbox component based on Bootstrap framework.

Installation

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css">

  <script src="https://code.jquery.com/jquery-3.1.1.min.js" defer></script>
  <script src="dist/js/bootstrap-checkbox.min.js" defer></script>
</head>
<body>
  ...
</body>
</html>

Enable Bootstrap-checkbox via JavaScript:

$(':checkbox').checkboxpicker();

Options

Property	Type	Default
baseGroupCls	null \| string	'btn-group'
baseCls	null \| string	'btn'
groupCls	null \| string	null
cls	null \| string	null
offCls	null \| string	'btn-default'
onCls	null \| string	'btn-default'
offActiveCls	null \| string	'btn-danger'
onActiveCls	null \| string	'btn-success'
offLabel	null \| string	'No'
onLabel	null \| string	'Yes'
disabledCursor	null \| string	'not-allowed'
html	boolean	false
iconCls	null \| string	'glyphicon'
offIconCls	null \| string	null
onIconCls	null \| string	null
offTitle	null \| string	null
onTitle	null \| string	null
reverse	boolean	false
switchAlways	boolean	false
toggleKeyCodes	array	[13, 32]
warningMessage	string	'Please do not use bootstrap-checkbox element in label element.'

Examples

<input type="checkbox">

<input type="checkbox" data-reverse>

<input type="checkbox" data-switch-always>

<input type="checkbox" disabled checked>

<input type="checkbox" data-group-cls="btn-group-sm">
<input type="checkbox" data-group-cls="btn-group-lg">

<input type="checkbox" data-group-cls="btn-group-vertical">

<div class="col-sm-3">
  <input type="checkbox" data-group-cls="btn-group-justified">
</div>

<input type="checkbox" title="Example title">

<input type="checkbox" data-off-title="No" data-on-title="Yes">

<input type="checkbox" data-off-icon-cls="gluphicon-thumbs-down" data-on-icon-cls="gluphicon-thumbs-up">

<input type="checkbox" data-off-label="false" data-on-label="false" data-off-icon-cls="glyphicon-thumbs-down" data-on-icon-cls="glyphicon-thumbs-up">

<input id="input-1" type="checkbox">
<script>
$('#input-1').checkboxpicker({
  html: true,
  offLabel: '<span class="glyphicon glyphicon-remove">',
  onLabel: '<span class="glyphicon glyphicon-ok">'
});
</script>

<input type="checkbox" checked data-off-active-cls="btn-warning" data-on-active-cls="btn-primary">
<input type="checkbox" checked data-off-cls="btn-danger" data-on-cls="btn-success" data-on-active-cls="btn-default" data-off-active-cls="btn-default">
<input type="checkbox" checked data-cls="btn-default" data-off-cls="null" data-on-cls="null" data-on-active-cls="null" data-off-active-cls="null">

Label

<label for="input-2"></label>
<input id="input-2" type="checkbox" checked>

<form>
  <input type="checkbox" checked>
  <input class="btn btn-default" type="reset">
</form>

<form>
  <input type="checkbox" data-toggle-key-codes="[32]">
  <input class="btn btn-default" type="submit">
</form>

Code examples

Calling from an event

To trigger an action use a change event.

$(':checkbox').checkboxpicker().on('change', function() {
  ...
});

Or call it, by an specific id member of the DOM.

$('#input-1').checkboxpicker();
$('#input-1').on('change', function() {
  ...
});

Changing checkbox value

Change checkbox checked value.

$('#input-1').prop('checked', false);

Disabling checkbox value

Disable checkbox.

$('#input-1').prop('disabled', true);