Disabled Binding

The Kendo UI Disabled (disabled) binding disables 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 enabled.

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

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

The following example demonstrates how to use the disabled binding. The input element is initially enabled because the value of the isNameDisabled field is false. When the user presses the button, the input is disabled because the value of the isNameDisabled field is set to true.

<div id="view">
<input type="text" data-bind="value: name, disabled: isNameDisabled" />
<button data-bind="click: disableInput">Disable</button>

<script>
var viewModel = kendo.observable({
    isNameDisabled: false,
    name: "John Doe",
    disableInput: function() {
        this.set("isNameDisabled", true);
    }
});

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