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.
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).
Non-Boolean values, such as 0
, null
, and ""
, are treated as false
by the enabled
binding. All other values are treated as true
.
The following example demonstrates how to use the enabled
binding. 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
.
<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>