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.2.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 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);