Manage various states of the checkboxes (2 state and 3 state) and combine it with label positioning
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)
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-94"> <input id="test-kv-94" type="checkbox" checked value="1"/>Click me </label> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-94"></code></div> </div> </div> <script> $('#test-kv-94').checkboxX({threeState: false, enclosedLabel: true}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-95">Click me</label> <input id="test-kv-95" type="checkbox" checked value="1"/> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-95"></code></div> </div> </div> <script> $('#test-kv-95').checkboxX({threeState: false, enclosedLabel: false}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-96"> <input id="test-kv-96" type="checkbox" checked value="1"/>Click me </label> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-96"></code></div> </div> </div> <script> $('#test-kv-96').checkboxX({threeState: true, enclosedLabel: true}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-97">Click me</label> <input id="test-kv-97" type="checkbox" checked value="1"/> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-97"></code></div> </div> </div> <script> $('#test-kv-97').checkboxX({threeState: true, enclosedLabel: false}); </script>
allowThreeValOnInit
setting). This will however not allow the user to toggle the checkbox to the third state.
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-102"> <input id="test-kv-102" type="checkbox"/>Click me </label> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-102"></code></div> </div> </div> <script> $('#test-kv-102').prop('indeterminate', true); $('#test-kv-102').checkboxX({threeState: false, allowThreeValOnInit:true, enclosedLabel: true}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-98"> <input id="test-kv-98" type="checkbox" checked value="1"/>Click me </label> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-98"></code></div> </div> </div> <script> $('#test-kv-98').checkboxX({useNative: true, threeState: false, enclosedLabel: true}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-99">Click me</label> <input id="test-kv-99" type="checkbox" checked value="1"/> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-99"></code></div> </div> </div> <script> $('#test-kv-99').checkboxX({useNative: true, threeState: false, enclosedLabel: false}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-100"> <input id="test-kv-100" type="checkbox" checked value="1"/>Click me </label> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-100"></code></div> </div> </div> <script> $('#test-kv-100').checkboxX({useNative: true, threeState: true, enclosedLabel: true}); </script>
<div class="row"> <div class="col-sm-3 pt-3"> <div class="cbx-krajee"> <label class="cbx-label" for="test-kv-101">Click me</label> <input id="test-kv-101" type="checkbox" checked value="1"/> </div> </div> <div class="col-sm-4"> <div class="alert alert-info">Value: <code id="kv-101"></code></div> </div> </div> <script> $('#test-kv-101').checkboxX({useNative: true, threeState: true, enclosedLabel: false}); </script>
Comments & Discussion
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.