Krajee
  1. Home
  2. CheckboxX Demo
  3. Demos
  4. Select Input
Star Fork Watch Follow
Thankful to Krajee! BUY A COFFEEor to get more out of us.

Initialize the plugin on a native SELECT input instead of a native checkbox

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)

Enclosed Label 2 state

Render select input within an enclosed label. This example displays a checkbox with 2-states (i.e. 0 or 1 as the values for the checkbox). Note that for the demos in this section and the next two, the output value on change will be displayed in these pages as well as in the browser console.
Value: 
<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-94">
                <select id="test-kv-94"/> 
                    <option value="1" selected>Yes</option>
                    <option value="0">No</option>
                </select>
                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>

Non Enclosed Label 2 state

Render select input along with a non-enclosed label. This example displays a checkbox with 2-states (i.e. 0 or 1 as the values for the checkbox).
Value: 
<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-95">
                <select id="test-kv-95"/> 
                    <option value="1" selected>Yes</option>
                    <option value="0">No</option>
                </select>
                Click me
            </label>
        </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>

Enclosed Label 3 state

Render select input within an enclosed label. This example displays a checkbox with 3-states (i.e. 0, 1 or null as the values for the checkbox).
Value: 
<div class="row">
    <div class="col-sm-3 pt-3">
        <div class="cbx-krajee">
            <label class="cbx-label" for="test-kv-96">
                <select id="test-kv-96"/> 
                    <option value="1" selected>Yes</option>
                    <option value="0">No</option>
                    <option value="">None</option>
                </select>
                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>

Non Enclosed Label 3 state

Render select input along with a non-enclosed label and 3 states.
Value: 
<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>
            <select id="test-kv-97"/> 
                <option value="1" selected>Yes</option>
                <option value="0">No</option>
                <option value="">None</option>
            </select>
        </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>

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.

 
visitors to Krajee Jquery Plugins since 22-May-2017