ejCheckBox

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

  • html
  • <ej-checkbox></ej-checkbox>

    Example

  • html
  • <ej-checkbox id="checkBox"></ej-checkbox>

    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

  • html
  • <ej-checkbox id="checkBox" [checked]="true"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    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

  • html
  • <ej-checkbox id="checkBox" [enableTriState]="true" [checkState]="checkState"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        checkState: string;
        constructor() {
        this.checkState = "indeterminate";
        }
    }

    cssClass string

    Sets the root CSS class for CheckBox theme, which is used customize.

    Default Value

    • ””

    Example

  • html
  • <ej-checkbox id="checkBox" [cssClass]="customCss"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        customCss: string;
        constructor() {
        this.customCss = "gradient-lime";
        }
    }

    enabled boolean

    Specifies the checkbox control state.

    Default Value

    • true

    Example

  • html
  • <ej-checkbox id="checkBox" [enabled]="true"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    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

  • html
  • <ej-checkbox id="checkBox" [enablePersistence]="false"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    enableRTL boolean

    Specify the Right to Left direction to Checkbox

    Default Value

    • false

    Example

  • html
  • <ej-checkbox id="checkBox" [enableRTL]="true"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    enableTriState boolean

    Specifies the enable or disable Tri-State for checkbox control.

    Default Value

    • false

    Example

  • html
  • <ej-checkbox id="checkBox" [enableTriState]="true"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    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

  • html
  • <ej-checkbox id="checkBox" [htmlAttributes]="htmlAttributes"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        htmlAttributes: Object;
        constructor() {
        this.htmlAttributes = {required:"required"};
        }
    }

    id string

    Specified value to be added an id attribute of the CheckBox.

    Default Value

    • null

    Example

  • html
  • <ej-checkbox id="checkBox" [id]="sync"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    idPrefix string

    Specify the prefix value of id to be added before the current id of the CheckBox.

    Default Value

    • “ej”

    Example

  • html
  • <ej-checkbox id="checkBox" [idPrefix]="idPrefix"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        idPrefix: string;
        constructor() {
        this.idPrefix = "ej";
        }
    }

    name string

    Specifies the name attribute of the CheckBox.

    Default Value

    • null

    Example

  • html
  • <ej-checkbox id="checkBox" [name]="name"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        name: string;
        constructor() {
        this.name = "sync";
        }
    }

    showRoundedCorner boolean

    Displays rounded corner borders to CheckBox

    Default Value

    • false

    Example

  • html
  • <ej-checkbox id="checkBox" [showRoundedCorner]="true"></ej-checkbox>
    <label for="checkBox">Experienced</label>

    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

  • html
  • <ej-checkbox id="checkBox" [size]="size"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        size: any;
        constructor() {
        this.size = "medium";
        }
    }

    text string

    Specifies the text content to be displayed for CheckBox.

    Default Value

    • ””

    Example

  • html
  • <ej-checkbox id="checkBox" [text]="text"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        text: string;
        constructor() {
        this.text = "Hello World";
        }
    }

    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

  • html
  • <ej-checkbox id="checkBox" [validationRules]="validationRules" [validationMessage]="validationMessage"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        validationRules: Object;
        validationMessage: Object;
        constructor() {
        this.validationRules = {required:true};
        this.validationMessage = {required: "Required CheckBox value"};
        }
    }

    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

  • html
  • <ej-checkbox id="checkBox" [validationRules]="validationRules"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        validationRules: Object;
        constructor() {
        this.validationRules = {required:true};
        }
    }

    value string

    Specifies the value attribute of the CheckBox.

    Default Value

    • null

    Example

  • html
  • <ej-checkbox id="checkBox" [value]="value"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        value: string;
        constructor() {
        this.value = "Hello World";
        }
    }

    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

  • html
  • <ej-checkbox id="checkBox"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • // Create CheckBox instance
    var checkBoxObj = $("#checkBox").data("ejCheckBox");
    checkBoxObj.destroy();// Destroy the CheckBox control

    disable()

    Disable the CheckBox to prevent all user interactions.

    Example

  • html
  • <ej-checkbox id="checkBox"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • // Create CheckBox instance
    var checkBoxObj = $("#checkBox").data("ejCheckBox");
    checkBoxObj.disable();// disable the CheckBox control

    enable()

    To enable the CheckBox

    Example

  • html
  • <ej-checkbox id="checkBox"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • // Create CheckBox instance
    var checkBoxObj = $("#checkBox").data("ejCheckBox");
    checkBoxObj.enable();// enables the CheckBox control

    isChecked()

    To Check the status of CheckBox

    ####Returns

    boolean

    Example

  • html
  • <ej-checkbox id="checkBox"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • // Create CheckBox instance
    var checkBoxObj = $("#checkBox").data("ejCheckBox");
    checkBoxObj.isChecked();// check the status of checkbox

    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 object 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

  • html
  • <ej-checkbox id="checkBox" (beforeChange)="onBeforeChange($event)"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        constructor() {
            onBeforeChange(e: any){
            // Your code here
            }
        }
    }

    ejchange

    Fires when the CheckBox state is changed successfully

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object 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

  • html
  • <ej-checkbox id="checkBox" (ejchange)="onChange($event)"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        constructor() {
            onChange(e: any){
            // Your code here
            }
        }
    }

    create

    Fires when the CheckBox state is created successfully

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the CheckBox model
    type string returns the name of the event

    Example

  • html
  • <ej-checkbox id="checkBox" (create)="onCreate($event)"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        constructor() {
            onCreate(e: any){
            // Your code here
            }
        }
    }

    destroy

    Fires when the CheckBox state is destroyed successfully

    Name Type Description
    cancel boolean if the event should be canceled; otherwise, false.
    model object returns the CheckBox model
    type string returns the name of the event

    Example

  • html
  • <ej-checkbox id="checkBox" (destroy)="onDestroy($event)"></ej-checkbox>
    <label for="checkBox">Experienced</label>
  • ts
  • export class AppComponent {
        constructor() {
            onDestroy(e: any){
            // Your code here
            }
        }
    }