ejCheckBox
11 Jul 201821 minutes to read
The CheckBox control allows you to check an option to perform an action. This control allows you to select true, false or an intermediate option. These CheckBoxes are supported with themes. The HTML CheckBox control is rendered as Essential JavaScript CheckBox control.
Syntax
$(element).ejCheckBox()
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
// Create CheckBox
$("#checkBox").ejCheckBox();
</script>
Requires
-
module:jQuery
-
module:ej.core.js
-
module:ej.checkbox.js
Members
checked boolean | string[]
Specifies whether CheckBox has to be in checked or not. We can also specify array of string as value for this property. If any of the value in the specified array matches the value of the textbox, then it will be considered as checked. It will be useful in MVVM binding, specify array type to identify the values of the checked CheckBoxes.
Default Value
- false
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set check API value during initialization
$("#checkBox").ejCheckBox({ checked: true });
</script>
checkState enum
Specifies the State of CheckBox.See below to get available CheckState
Name | Type | Default | Description |
---|---|---|---|
Uncheck | string | uncheck | Enum for Uncheck state checkbox |
Check | string | check | Enum for Check state checkbox |
Indeterminate | string | indeterminate | Enum for Indeterminate state checkbox |
Default Value
- null
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set CheckState API value during initialization
$("#checkBox").ejCheckBox({ enableTriState: true , checkState:"indeterminate"});
</script>
cssClass string
Sets the root CSS class for CheckBox theme, which is used customize.
Default Value
- ””
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
// Set the root class for CheckBox control theme. This cssClass API helps to use custom skinning option for CheckBox control. By defining the root class using this API, we need to include this root class in CSS.
$("#checkBox").ejCheckBox({cssClass: "gradient-lime"});
</script>
enabled boolean
Specifies the checkbox control state.
Default Value
- true
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To Enable checkbox on initialization.
//To set width API value
$("#checkBox").ejCheckBox ({ enabled: true });
</script>
enablePersistence boolean
Specifies the persist property for CheckBox while initialization. The persist API save current model value to browser cookies for state maintains. While refreshing the CheckBox control page the model value apply from browser cookies.
Default Value
- false
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set persist API value
$("#checkBox").ejCheckBox({ enablePersistence : false });
</script>
enableRTL boolean
Specify the Right to Left direction to Checkbox
Default Value
- false
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
// Set the RTL during initialization.
$("#checkBox").ejCheckBox({ enableRTL : true });
</script>
enableTriState boolean
Specifies the enable or disable Tri-State for checkbox control.
Default Value
- false
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
// Specifies to enable or disable Tri-State option checkbox while initialization.
//To set enableTriState API value
$("#checkBox").ejCheckBox({ enableTriState: true });
</script>
htmlAttributes object
It allows to define the characteristics of the CheckBox control. It will helps to extend the capability of an HTML element.
Default Value
- {}
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//Set HtmlAttributes to CheckBox element during initialization
$("#checkBox").ejCheckBox({ htmlAttributes : {required:"required"}});
</script>
id string
Specified value to be added an id attribute of the CheckBox.
Default Value
- null
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set id API value during initialization
$("#checkBox").ejCheckBox({ id: "sync" });
</script>
idPrefix string
Specify the prefix value of id to be added before the current id of the CheckBox.
Default Value
- “ej”
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
// To set idPrefix API value
$("#checkBox").ejCheckBox ({ idPrefix : "ej" });
</script>
name string
Specifies the name attribute of the CheckBox.
Default Value
- null
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set name API value during initialization
$("#checkBox").ejCheckBox({ name: "sync" });
</script>
showRoundedCorner boolean
Displays rounded corner borders to CheckBox
Default Value
- false
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To Set the rounded corner during initialization.
$("#checkBox").ejCheckBox({ showRoundedCorner: true });
</script>
size enum
Specifies the size of the CheckBox.See below to know available CheckboxSize</a>
Name | Description |
---|---|
Medium | Displays the CheckBox in medium size |
Small | Displays the CheckBox in small size |
Default Value
- “small”
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set size API value during initialization
$("#checkBox").ejCheckBox({ size: "medium"});
</script>
text string
Specifies the text content to be displayed for CheckBox.
Default Value
- ””
Example
<input type="checkbox" id="checkBox"/>
<script>
// To set text API value
$("#checkBox").ejCheckBox({ text: "Hello World"});
</script>
validationMessage object
Set the jQuery validation error message in CheckBox.
NOTE
The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.
Default Value
- null
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set validationMessage API during initialization
$("#checkBox").ejCheckBox({
validationRules:{
required:true
},
validationMessage: {
required: "Required CheckBox value"
}
});
</script>
validationRules object
Set the jQuery validation rules in CheckBox.
NOTE
The property will work when the widget present inside the form. Additionally need to include jquery.validate.min.js plugin.
Default Value
- null
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set validationRules API during initialization
$("#checkBox").ejCheckBox({
validationRules:{
required:true
}
});
</script>
value string
Specifies the value attribute of the CheckBox.
Default Value
- null
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To set value API value during initialization
$("#checkBox").ejCheckBox({ value: "Hello World"});
</script>
Methods
destroy()
Destroy the CheckBox widget all events bound using this._on will be unbind automatically and bring the control to pre-init state.
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
// Create CheckBox instance
var checkBoxObj = $("#checkBox").data("ejCheckBox");
checkBoxObj.destroy();// Destroy the CheckBox control
</script>
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
//To destroy the CheckBox control
$("#checkBox").ejCheckBox("destroy");
</script>
disable()
Disable the CheckBox to prevent all user interactions.
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
// Create CheckBox instance
var checkBoxObj = $("#checkBox").data("ejCheckBox");
checkBoxObj.disable(); //disables the CheckBox
</script>
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
//To disable the CheckBox
$("#checkBox").ejCheckBox("disable");
</script>
enable()
To enable the CheckBox
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
// Create CheckBox instance
var checkBoxObj = $("#checkBox").data("ejCheckBox");
checkBoxObj.enable(); // enables the CheckBox
</script>
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
//To enable the CheckBox
$("#checkBox").ejCheckBox("enable");
</script>
isChecked()
To Check the status of CheckBox
####Returns
boolean
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
// Create CheckBox instance
var checkBoxObj = $("#checkBox").data("ejCheckBox");
checkBoxObj.isChecked(); // check the status of checkbox
</script>
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
$("#checkBox").ejCheckBox();
//To check the status of checkbox
$("#checkBox").ejCheckBox("isChecked");
</script>
Events
beforeChange
Fires before the CheckBox is going to changed its state successfully
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the CheckBox model |
type | string | returns the name of the event |
event | object | returns the event model values |
isChecked | boolean | returns the status whether the element is checked or not. |
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To create beforeChange event for checkbox
$("#checkBox").ejCheckBox({
beforeChange: function (args) {}
});
</script>
change
Fires when the CheckBox state is changed successfully
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the CheckBox model |
type | string | returns the name of the event |
event | object | returns the event arguments |
isChecked | boolean | returns the status whether the element is checked or not. |
checkState | string | returns the state of the checkbox |
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
// change event for checkbox
$("#checkBox").ejCheckBox({
change: function (args) {}
});
</script>
create
Fires when the CheckBox state is created successfully
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the CheckBox model |
type | string | returns the name of the event |
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To create event for checkbox
$("#checkBox").ejCheckBox({
create: function (args) {}
});
</script>
destroy
Fires when the CheckBox state is destroyed successfully
Name | Type | Description |
---|---|---|
cancel | boolean | if the event should be canceled; otherwise, false. |
model |
|
returns the CheckBox model |
type | string | returns the name of the event |
Example
<input type="checkbox" id="checkBox"/>
<label for="checkBox">Experienced</label>
<script>
//To create destroy event for checkbox
$("#checkBox").ejCheckBox({
destroy: function (args) {}
});
</script>