Bootstrap-checkbox

A checkbox component based on Bootstrap framework.

Download
View on GitHub

Installation

<!DOCTYPE html>
<html>
<head>
  …
  <script src="https://unpkg.com/bootstrap-checkbox@2.0.0/dist/js/bootstrap-checkbox.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" readonly>
<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-base-group-cls="btn-group-vertical">
<input type="checkbox" title="Example title">
<input type="checkbox" data-off-title="No" data-on-title="Yes">
<input type="checkbox" data-off-icon-cls="fa-thumbs-down" data-on-icon-cls="fa-thumbs-up">
<input type="checkbox" data-off-label="false" data-on-label="false" data-off-icon-cls="fa-thumbs-down" data-on-icon-cls="fa-thumbs-up">
<input id="input-1" type="checkbox">
<script>
$('#input-1').checkboxpicker({
  html: true,
  offLabel: '<span class="fas fa-minus-square">',
  onLabel: '<span class="fas fa-plus-square">'
});
</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-secondary" data-off-active-cls="btn-secondary">
<input type="checkbox" checked data-cls="btn-secondary" data-off-cls="null" data-on-cls="null" data-on-active-cls="null" data-off-active-cls="null">

<label for="input-2">Label</label>
<input id="input-2" type="checkbox" checked>
<form>
  <input type="checkbox" checked>
  <input class="btn btn-secondary" type="reset">
</form>
<form>
  <input type="checkbox" data-toggle-key-codes="[32]">
  <input class="btn btn-secondary" 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);