Initialize rating with a predefined value. Automatically reset value when form is reset.

<form>
    <div class="cbx-krajee">
        <label for="input-21" class="cbx-label">Status</label>
        <input id="input-21" name="input-21" data-toggle="checkbox-x" value="1">
    </div>
    <button class="btn btn-primary">Submit</button>
    <button type="reset" class="btn btn-secondary">Reset</button>
</form>

Using plugin methods. For example, click the button, to set a value via javascript at runtime, then disable the checkbox, and refresh the checkbox. Click again to undo.

<div class="cbx-krajee">
    <label for="input-27" class="cbx-label">Rate This</label>
    <input id="input-27" name="input-27" data-toggle="checkbox-x">
</div>
<hr>
<button type="button" class="btn btn-secondary btn-test">Toggle Refresh</button>

Using plugin methods. Destroy and recreate the plugin.

<div class="cbx-krajee">
    <label for="input-27a" class="cbx-label">
        <input id="input-27a" name="input-27" type="checkbox" data-toggle="checkbox-x" data-enclosed-label="true">
        Check Me
    </label>
</div>
<hr>
<button type="button" class="btn btn-danger btn-destroy">Destroy</button>
<button type="button" class="btn btn-success btn-recreate">Recreate</button>

Customise icon markup and CSS by setting specific properties in plugin settings.

<div class="cbx-krajee">
    <label class="cbx-label" for="input-28a">Status</label>
    <input type="checkbox" id="input-28a" value="1" checked>
</div>
<script>
$("#input-28a").checkboxX({
    iconUnchecked: '<span style="display:inline-block;font-size:24px;margin-top:-15px">&ndash;</span>',
    iconCheckedCss: 'text-success',
    iconUncheckedCss: 'text-danger',
    iconNullCss: 'text-info'
});
</script>