Edit this page

Enabled Binding

The Kendo UI Enabled (enabled) binding enables the target DOM element or widget if the View-Model value is true. If the View-Model value is false the target DOM element or widget is disabled.

Getting Started

The enabled binding supports only input HTML elements: input, select, button and textarea. When an input element is disabled the end user cannot change its value (type in text or choose a different option).

Setup

The example below demonstrates how to use the enabeled binding.

Example
<div id="view">
    <input type="text" data-bind="value: name, enabled: isNameEnabled" />
    <button data-bind="click: enableInput">Enable</button>
</div>
<script>
var viewModel = kendo.observable({
    isNameEnabled: false,
    name: "John Doe",
    enableInput: function() {
        this.set("isNameEnabled", true);
    }
});

kendo.bind($("#view"), viewModel);
</script>

In the example, the input element is initially disabled because the value of the isNameEnabled field is false. When the user presses the button, the input is enabled because the value of the isNameEnabled field is set to true.

Non-Boolean Values

Non-boolean values, such as 0, null, undefined and "", are treated as false by the enabled binding. All other values are treated as true.

See Also

Other articles on the Kendo UI MVVM component and bindings:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy