ui.igCheckboxEditor
Code Sample
<!DOCTYPE html> <html> <head> <!--Ignite UI Required Combined CSS Files--> <link href="css/themes/infragistics/infragistics.theme.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.popover.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.notifier.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.editors.css" rel="stylesheet" /> <link href="css/themes/infragistics/infragistics.ui.shared.css" rel="stylesheet" /> <link href="css/structure/infragistics.css" rel="stylesheet" /> <script src="http://modernizr.com/downloads/modernizr-latest.js"></script> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script> <!--Ignite UI Required Combined JavaScript Files--> <script src="js/infragistics.core.js"></script> <script src="js/infragistics.lob.js"></script> <script type="text/javascript"> $(document).ready(function () { $('#checkbox').igCheckboxEditor({ checked: true, inputName: "chkBox2name", value: "semanticValue", readOnly: true, size: "normal" }); }); </script> </head> <body> <input id="checkbox"/> </body> </html>
Related Samples
Related Topics
Dependencies
Inherits
-
checked
- Type:
- bool
- Default:
- false
Gets/Sets whether the checkbox is checked.
Code Sample
//Initialize $('.selector').igCheckboxEditor({ checked: true }); //Get var checked = $(".selector").igCheckboxEditor("option", "checked"); //Set $(".selector").igCheckboxEditor("option", "checked", true);
-
disabled
Inherited- Type:
- bool
- Default:
- false
Gets/Sets the disabled attribute for the input. If set to true the input is disabled, and all buttons and interactions are disabled. On submitting the form the editor belongs to, the value is not submitted.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ disabled : false }); //Get var disabled = $(".selector").igCheckboxEditor("option", "disabled"); //Set $(".selector").igCheckboxEditor("option", "disabled", true);
-
height
Inherited- Type:
- enumeration
- Default:
- null
Gets/Sets the height of the control.
Members
- null
- Type:object
- will fit the editor inside its parent container, if no other heights are defined.
- string
- The height can be set in pixels (px) and percentage (%).
- number
- The height can be set as a number in pixels.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ height : 25 }); //Get var height = $(".selector").igCheckboxEditor("option", "height"); //Set $(".selector").igCheckboxEditor("option", "height", 25);
-
iconClass
- Type:
- string
- Default:
- "ui-icon-check"
Gets/Sets a custom class on the checkbox. Custom image can be used this way.
The following jQuery classes can be used in addition http://api.jqueryui.com/theming/icons/.Code Sample
//Initialize $('.selector').igCheckboxEditor({ iconClass: "ui-icon-check" }); //Get var iconClass = $(".selector").igCheckboxEditor("option", "iconClass"); //Set $(".selector").igCheckboxEditor("option", "iconClass", "ui-icon-check");
-
inputName
Inherited- Type:
- string
- Default:
- null
Gets/Sets the name attribute of the value input. This input is used to sent the value to the server. In case the target element is input and it has name attribute, but the developer has set the inputName option, so this option overwrites the value input and removes the attribute from the element.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ inputName : "textField" }); //Get var inputName = $(".selector").igCheckboxEditor("option", "inputName"); //Set $(".selector").igCheckboxEditor("option", "inputName", "textField");
-
language
Inherited- Type:
- string
- Default:
- "en"
Set/Get the locale language setting for the widget.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ language: "ja" }); // Get var language = $(".selector").igCheckboxEditor("option", "language"); // Set $(".selector").igCheckboxEditor("option", "language", "ja");
-
locale
Inherited- Type:
- object
- Default:
- null
Set/Get the locale setting for the widget.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ locale: {} }); // Get var locale = $(".selector").igCheckboxEditor("option", "locale"); // Set $(".selector").igCheckboxEditor("option", "locale", {});
-
readOnly
- Type:
- bool
- Default:
- false
Gets/Sets the readonly attribute. Does not allow editing. Disables changing the checkbox state as an interaction, but it still can be changed programmatically. On submit the current value is sent into the request.
Code Sample
//Initialize $('.selector').igCheckboxEditor({ readOnly: true }); //Get var readOnly = $(".selector").igCheckboxEditor("option", "readOnly"); //Set $(".selector").igCheckboxEditor("option", "readOnly", true);
-
regional
Inherited- Type:
- enumeration
- Default:
- defaults
Set/Get the regional setting for the widget.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ regional: "ja" }); // Get var regional = $(".selector").igCheckboxEditor("option", "regional"); // Set $(".selector").igCheckboxEditor("option", "regional", "ja");
-
size
- Type:
- enumeration
- Default:
- normal
Gets/Sets size of the checkbox based on preset styles. For different sizes, define 'width' and 'height' options instead.
Members
- verysmall
- Type:string
- The size of the Checkbox editor is very small.
- small
- Type:string
- The size of the Checkbox editor is small.
- normal
- Type:string
- The size of the Checkbox editor is normal.
- large
- Type:string
- The size of the Checkbox editor is large.
Code Sample
//Initialize $('.selector').igCheckboxEditor({ size: "large" }); //Get var size = $(".selector").igCheckboxEditor("option", "size"); //Set $(".selector").igCheckboxEditor("option", "size", "large");
-
tabIndex
- Type:
- number
- Default:
- 0
Gets/Sets tabIndex attribute for the editor input.
Code Sample
//Initialize $('.selector').igCheckboxEditor({ tabIndex: 1 }); //Get var tabIndex = $(".selector").igCheckboxEditor("option", "tabIndex"); //Set $(".selector").igCheckboxEditor("option", "tabIndex", 1);
-
validatorOptions
Inherited- Type:
- object
- Default:
- null
Gets/Sets options supported by the igValidator widget.
Note: Validation rules of igValidator, such as min and max value/length are applied separately triggering errors,
while the corresponding options of the editor prevent values violating the defined rules from being entered.Code Sample
//Initialize $(".selector").igCheckboxEditor({ validatorOptions : { successMessage: "Success", required: true, onchange: true, notificationOptions: { mode: "popover" } } }); //Get var validateOptions = $(".selector").igCheckboxEditor("option", "validatorOptions"); //Set $(".selector").igCheckboxEditor("option", "validatorOptions", {onblur: true, onchange: true});
-
value
Inherited- Type:
- object
- Default:
- null
Gets/Sets value in editor. The effect of setting/getting that option depends on type of editor and on dataMode options for every type of editor.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ value : "Some text" }); //Get var value = $(".selector").igCheckboxEditor("option", "value"); //Set $(".selector").igCheckboxEditor("option", "value", "Some text");
-
width
Inherited- Type:
- enumeration
- Default:
- null
Gets/Sets the width of the control.
Members
- null
- Type:object
- will stretch to fit data, if no other widths are defined.
- string
- The widget width can be set in pixels (px) and percentage (%).
- number
- The widget width can be set as a number in pixels.
Code Sample
//Initialize $(".selector").igCheckboxEditor({ width : 200 }); //Get var width = $(".selector").igCheckboxEditor("option", "width"); //Set $(".selector").igCheckboxEditor("option", "width", 200);
For more information on how to interact with the Ignite UI controls' events, refer to
Using Events in Ignite UI.
-
blur
Inherited- Cancellable:
- false
Fired when the input field of the editor loses focus.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorblur", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ blur: function (evt, ui) { ... } });
-
focus
Inherited- Cancellable:
- false
Fired when the input field of the editor gets focus.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorfocus", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ focus: function (evt, ui) { ... } });
-
keydown
Inherited- Cancellable:
- true
Fired on keydown event.
Return false in order to cancel key action.Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorkeydown", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ keydown: function (evt, ui) { ... } });
-
keypress
Inherited- Cancellable:
- true
Fired on keypress event.
Return false in order to cancel key action.-
evtType: Event
JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
elementType: Object
Gets a reference to the event target.
-
editorInputType: Object
Gets a reference to the editor input field.
-
keyType: Object
Gets the value of the keyCode.
-
originalEventType: Object
Gets a reference to the event object of the browser.
-
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorkeypress", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ keypress: function (evt, ui) { ... } });
-
keyup
Inherited- Cancellable:
- false
Fired on keyup event.
-
evtType: Event
JQuery event object. Use evt.originalEvent to obtain reference to event of the browser.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
elementType: Object
Gets a reference to the event target.
-
editorInputType: Object
Gets a reference to the editor input field.
-
keyType: Object
Gets the value of the keyCode.
-
originalEventType: Object
Gets a reference to the event object of the browser.
-
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorkeyup", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ keyup: function (evt, ui) { ... } });
-
mousedown
Inherited- Cancellable:
- true
Fired on mousedown event.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditormousedown", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mousedown: function (evt, ui) { ... } });
-
mousemove
Inherited- Cancellable:
- false
Fired on mousemove at any part of editor including the drop-down list.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditormousemove", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mousemove: function (evt, ui) { ... } });
-
mouseout
Inherited- Cancellable:
- false
Fired on mouseleave at any part of editor including the drop-down list.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditormouseout", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mouseout: function (evt, ui) { ... } });
-
mouseover
Inherited- Cancellable:
- false
Fired on mouseover at any part of editor including the drop-down list.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditormouseover", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mouseover: function (evt, ui) { ... } });
-
mouseup
Inherited- Cancellable:
- false
Fired on mouseup event.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditormouseup", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ mouseup: function (evt, ui) { ... } });
-
rendered
Inherited- Cancellable:
- false
Fired after rendering of the editor has finished.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorrendered", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ rendered: function (evt, ui) { ... } });
-
rendering
Inherited- Cancellable:
- true
Fired before rendering of the editor has finished.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorrendering", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ rendering: function (evt, ui) { ... } });
-
valueChanged
- Cancellable:
- false
Fired after the editor's value has been changed.
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorvaluechanged", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ valueChanged: function (evt, ui) { ... } });
-
valueChanging
- Cancellable:
- true
Fired before changing the editor's value.
Return false in order to cancel change.-
evtType: Event
JQuery event object.
-
uiType: Object
-
ownerType: Object
Gets a reference to the editor.
-
elementType: Object
Gets a reference to the event target.
-
editorInputType: Object
Gets a reference to the editor element.
-
oldValueType: Unknown
Gets the editor's old value.
-
oldStateType: Unknown
Gets the editor's old check state.
-
newValueType: Unknown
Gets the editor's new value.
-
newStateType: Unknown
Gets the editor's new check state.
-
Code Sample
//Bind after initialization $(".selector").on("igcheckboxeditorvaluechanging", function (evt, ui) { ... }); //Initialize $(".selector").igCheckboxEditor({ valueChanging: function (evt, ui) { ... } });
-
changeGlobalLanguage
Inherited- .igCheckboxEditor( "changeGlobalLanguage" );
Changes the widget language to global language. Global language is the value in $.ig.util.language.
Code Sample
$(".selector").igCheckboxEditor("changeGlobalLanguage");
-
changeGlobalRegional
Inherited- .igCheckboxEditor( "changeGlobalRegional" );
Changes the widget regional settins to global regional settings. Global regional settings are container in $.ig.util.regional.
Code Sample
$(".selector").igCheckboxEditor("changeGlobalRegional");
-
changeLocale
Inherited- .igCheckboxEditor( "changeLocale", $container:object );
Changes the all locales contained into a specified container to the language specified in options.language
Note that this method is for rare scenarios, use language or locale option setter.- $container
- Type:object
- Optional parameter - if not set it would use the element of the widget as $container.
Code Sample
$(".selector").igCheckboxEditor("changeLocale");
-
destroy
Inherited- .igCheckboxEditor( "destroy" );
Destroys the widget.
Code Sample
$(".selector").igCheckboxEditor("destroy");
-
editorContainer
Inherited- .igCheckboxEditor( "editorContainer" );
- Return Type:
- jquery
- Return Type Description:
- The container editor element.
Gets a reference to the jQuery element that wraps the editor.
Code Sample
$(".selector").igCheckboxEditor("editorContainer");
-
field
Inherited- .igCheckboxEditor( "field" );
- Return Type:
- jquery
- Return Type Description:
- The visual editor element.
Gets the input element of the editor.
Code Sample
$(".selector").igCheckboxEditor("field");
-
hasFocus
Inherited- .igCheckboxEditor( "hasFocus" );
- Return Type:
- bool
- Return Type Description:
- Returns if the editor is focused or not.
Gets whether the editor has focus.
Code Sample
$(".selector").igCheckboxEditor("hasFocus");
-
hide
Inherited- .igCheckboxEditor( "hide" );
Hides the editor.
Code Sample
$(".selector").igCheckboxEditor("hide");
-
inputName
Inherited- .igCheckboxEditor( "inputName", [newValue:string] );
- Return Type:
- string
- Return Type Description:
- Current input name.
Gets/Sets name attribute applied to the editor element.
- newValue
- Type:string
- Optional
- The new input name.
Code Sample
$(".selector").igCheckboxEditor("inputName", "checkbox");
-
isValid
- .igCheckboxEditor( "isValid" );
- Return Type:
- bool
- Return Type Description:
- Whether editor value is valid or not.
Checks if the value in the editor is valid. Note: This function will not trigger automatic notifications.
Code Sample
var isValid = $(".selector").igCheckboxEditor("isValid");
-
setFocus
Inherited- .igCheckboxEditor( "setFocus", [delay:number] );
Sets focus to the editor after the specified delay.
- delay
- Type:number
- Optional
- The delay before focusing the editor.
Code Sample
$(".selector").igCheckboxEditor("setFocus", 200);
-
show
Inherited- .igCheckboxEditor( "show" );
Shows the editor.
Code Sample
$(".selector").igCheckboxEditor(("show");
-
toggle
- .igCheckboxEditor( "toggle" );
Toggles the state of the checkbox.
Code Sample
$(".selector").igCheckboxEditor("toggle");
-
validate
Inherited- .igCheckboxEditor( "validate" );
- Return Type:
- bool
- Return Type Description:
- Whether editor value is valid or not.
Triggers validation for the editor. If validatorOptions are set will also call validate on the igValidator.
Code Sample
var valid = $(".selector").igCheckboxEditor("validate");
-
validator
Inherited- .igCheckboxEditor( "validator" );
- Return Type:
- object
- Return Type Description:
- Returns reference to igValidator or null.
Gets a reference to igValidator used by the editor.
Code Sample
var validator = $(".selector").igCheckboxEditor("validator");
-
value
- .igCheckboxEditor( "value", newValue:object );
- Return Type:
- string
- Return Type Description:
- Current checked state(bool) or the value(string) of the igCheckboxEditor that will be submitted by the HTML form.
Gets/Sets Current checked state/Value of the igCheckboxEditor that will be submitted by the HTML form.
1. If the value option IS NOT defined, then 'value' method will match the checked state of the editor.
This option is used when the checkbox is intended to operate as a Boolean editor. In that case the return type is bool.
2. If the value option IS defined, then 'value' method will return the value that will be submitted when the editor is checked and the form is submitted.
To get checked state regardless of the 'value' option, use $(".selector").igCheckboxEditor("option", "checked");.- newValue
- Type:object
Code Sample
//Get var editorVal = $(".selector").igCheckboxEditor("value"); //Set $(".selector").igCheckboxEditor("value", 42);
-
ui-state-active
- Class applied to the top element when editor is active. Default value is 'ui-state-active'.
-
ui-icon
- Class applied to the checkbox element when that holds the styles for the checkbox icon. Default value is 'ui-icon'.
-
ui-helper-hidden
- Class applied to the hidden HTML checkbox input when. Default value is 'ui-helper-hidden'.
-
ui-igcheckbox-normal-on
- Class applied to the checkbox element when it is checked. Default value is 'ui-igcheckbox-normal-on'.
-
ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal
- Classes applied to the top element when editor is rendered in container. Default value is 'ui-state-default ui-corner-all ui-widget ui-checkbox-container ui-igcheckbox-normal'.
-
ui-state-checkbox-checked
- Class applied to the top element when editor is checked. Default value is 'ui-state-checkbox-checked'.
-
ui-state-disabled
- Classes applied to the editing element in disabled state. Default value is 'ui-igedit-disabled ui-state-disabled'.
-
ui-igedit-input
- Class applied to the main/top element. Default value is 'ui-igedit-input'.
-
ui-state-focus
- Class applied to the top element when editor is on focus. Default value is 'ui-state-focus'.
-
ui-state-hover
- Class applied to the top element when editor is hovered. Default value is 'ui-state-hover'.
-
ui-icon-custom
- Class applied to the checkbox element that there is custom width and height, in order to have the image centered. Default value is 'ui-icon-custom'.
-
ui-igcheckbox-normal-off
- Class applied to the checkbox element when it is unchecked. Default value is 'ui-igcheckbox-normal-off'.