Krajee
Thankful to Krajee! BUY A COFFEEor to get more out of us.

Advanced usage examples of the CheckboxX plugin.

Tip

Not seeing the updated content on this page! Hard refresh your browser to clean cache for this page (e.g. SHIFT-F5 on Windows Chrome)

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>

Note

You can now visit the Krajee Webtips Q & A forum for searching OR asking questions OR helping programmers with answers on these extensions and plugins. For asking a question click here. Select the appropriate question category (i.e. Krajee Plugins) and choose this current page plugin in the question related to field.

The comments and discussion section below are intended for generic discussions or feedback for this plugin. Developers may not be able to search or lookup here specific questions or tips on usage for this plugin.

 
visitors to Krajee Jquery Plugins since 22-May-2017