CheckBox Configuration

An object defining configuration options for the dxCheckBox widget.

activeStateEnabled

A Boolean value specifying whether or not the widget changes its state when interacting with a user.

Type: Boolean
Default Value: true

This option is used when the widget is displayed on a platform whose guidelines include the active state change for widgets.

Show Example:
jQuery
<div><span data-bind="dxCheckBox: { activeStateEnabled: enableActiveState }"></span> check me</div>
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Active state</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: enableActiveState }"></div>
  </div>
</div>
enableActiveState = ko.observable(true);
body{
  text-align: center;
}

checked

A Boolean value specifying whether or not the check box is checked.

Type: Boolean
Default Value: false

Show Example:
jQuery
<div class="dx-fieldset">
    <div class="dx-field">
        <div class="dx-field-label">Check me</div>
        <div class="dx-field-value" data-bind="dxCheckBox: { checked: checkBoxState }"></div>
    </div>
    <div class="dx-field">
        <div class="dx-field-label">Checked</div>
        <div class="dx-field-value" data-bind="text: checkBoxState"></div>
    </div>
</div>
checkBoxState = ko.observable(false);

clickAction

An action performed when the widget is clicked.

Type: Action
Default Value: null

Show Example:
jQuery
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Check me</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: false, clickAction: processClick }"></div>
  </div>
</div>
processClick = function () {
  DevExpress.ui.notify("The widget has been clicked", "info", 1000);
}

disabled

A Boolean value specifying whether or not a component can respond to user interaction.

Type: Boolean
Default Value: false

Create an observable variable and assign it to this option to specify the availability of the component at runtime.

Show Example:
jQuery
<div class="checkbox"><span data-bind="dxCheckBox: { disabled: checkBoxDisabled }"></span> My check box</div><br />
<div class="dx-fieldset">
  <div class="dx-field">
    <div class="dx-field-label">Disabled</div>
    <div class="dx-field-value" data-bind="dxCheckBox: { checked: checkBoxDisabled }"></div>
  </div>
</div>
checkBoxDisabled = ko.observable(false);
body{
  text-align: center;
}
.checkBox{
  margin: 10px;
}

height

Specifies the height of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the height of the widget in pixels;
  • string - a CSS measurement of the widget height (e.g., "55px", "80%", "auto" and "inherit");
  • function - a function returning the widget height (e.g., height:function(){ return baseHeight - 10 + "%"; }).

visible

A Boolean value specifying whether or not the widget is visible.

Type: Boolean
Default Value: true

width

Specifies the width of the widget.

Type: Number|String|function
Default Value: undefined

The option can hold a value of the following types:

  • numeric - the widget width in pixels;
  • string - a CSS measurement of the widget width (e.g., "55px", "80%", "auto" and "inherit");
  • function - the function returning the widget width (e.g., width:function(){ return baseWidth - 10 + "%"; }).