Automatically convert an input to a bootstrap checkbox x control by setting its data-toggle attribute as checkbox-x. Note the special styling on hover and focus similar to a bootstrap 3 form-control (and yet different than the native checkbox). You can navigate to and control checkbox values using keyboard (e.g. using TAB and the SPACE bar). The special class cbx-label on the label tag will make the labels styled similar to bootstrap 3 native checkbox labels.

<div class="cbx-krajee">
    <label for="input-10a" class="cbx-label">Checked</label>
    <input type="checkbox" id="input-10a" value="1" checked data-toggle="checkbox-x">
</div>
&nbsp;
<div class="cbx-krajee">
    <label for="input-10b" class="cbx-label">Unchecked</label>
    <input type="checkbox" id="input-10b" value="0" data-toggle="checkbox-x">
</div>
&nbsp;
<div class="cbx-krajee">
    <label for="input-10c" class="cbx-label">Indeterminate</label>
    <input type="checkbox" id="input-10c" data-toggle="checkbox-x">
<script>document.getElementById('input-10c').indeterminate = true;</script>
</div>

Set the checkbox x rating control to be readonly or disabled. You can use a text input instead of a checkbox to initialize the input as seen in this example.

<div class="cbx-krajee">
    <label for="input-5a" class="cbx-label disabled">Readonly Input</label>
    <input type="text" id="input-5a" data-toggle="checkbox-x" value="1" readonly>
</div>
&nbsp;
<div class="cbx-krajee">
    <label for="input-5b" class="cbx-label disabled">Disabled Input&nbsp;</label>
    <input id="input-5b" data-toggle="checkbox-x" disabled>
</div>
<!-- note input type is text by default if not specified -->

Checkbox X control with labels. You can click on labels to change checkbox values. Note that inline alignment is set by default.

<div class="cbx-krajee">
    <label class="cbx-label small" for="check-1g">Left Label</label>
    <input type="checkbox" id="check-1g" value="1" checked data-toggle="checkbox-x" data-size="sm">
</div>
<span style="border-left: 1px solid #ddd; margin: 0 10px;"></span>
<div class="cbx-krajee">
    <input type="checkbox" id="check-2g" value="0" data-toggle="checkbox-x" data-size="sm">
    <label class="cbx-label small" for="check-2g">Right Label</label>
</div>
<span style="border-left: 1px solid #ddd; margin: 0 10px;"></span>
<div class="cbx-krajee">
    <label class="cbx-label small">Enclosing Label
    <input type="checkbox" id="check-3g" value="" data-toggle="checkbox-x" data-size="sm" data-enclosed-label="true">
</div>

Allow only two states for the checkbox (1 and 0).

<div class="cbx-krajee">
    <label class="cbx-label" for="input-20">Status</label>
    <input type="checkbox" id="input-20" data-toggle="checkbox-x" value="1" data-three-state="false">
</div>

Initialize plugin via javascript (note that you should not set data-toggle="checkbox" for this case). You can use customized HTML markup as checkbox indicators.

<div class="cbx-krajee">
    <label class="cbx-label" for="input-20a">Status
    <input type="checkbox" id="input-20a" value="1" checked>
    </label>
</div>
<script>
$("#input-20a").checkboxX({
    enclosedLabel: true,
    iconChecked: '<b style="display:inline-block;font-size:1.25rem;margin-top:-1.5rem;color:green;">&check;</b>',
    iconUnchecked: '<b style="display:inline-block;font-size:1.5rem;margin-top:-1.75rem;color:red">&times;</b>',
});
</script>