Applying k-state-disabled class to text inputs - Kendo UI

javascript, jquery, kendo-ui

Solution

I think that easiest and more portable way of doing it is by adding / removing `k-state-disabled` when you set the `disabled` property value.

Example for enabling you textbox:

$("#textboxtest").prop("disabled", false).removeClass("k-state-disabled");

for disabling it:

$("#textboxtest").prop("disabled", true).addClass("k-state-disabled");

Your JSFiddle modified with two buttons for enabling / disabling it http://jsfiddle.net/KrW6f/5/

Edit: Another possibility is defining the field as an `autocomplete` without a `dataSource`. Then you actually not need to define any CSS class. Your input field definition would be:

<input id="textboxtest" data-role="autocomplete" type="text" disabled="disabled" value="test" style="width: 300px" />

And you can see it in this other JSFiddle: http://jsfiddle.net/OnaBai/94HDF/2/

Problem

Here is my jsfiddle demo. ``` <div id="example" class="k-content"> <div class="demo-section"> <p> <label for="products">Products:</label><input id="products" disabled="disabled" style="width: 300px" /> </p> <p> <label>Text:</label><input id="textboxtest" type="text" class="k-textbox" disabled="disabled" value="test" style="width: 300px" /> </p> </div> </div> <script> $(document).ready(function() { var products = $("#products").kendoComboBox({ cascadeFrom: "categories", filter: "contains", placeholder: "Select product...", dataTextField: "ProductName", dataValueField: "ProductID", dataSource: { data: [{"ProductName": "ProductName1", "ProductID": "1"}, {"ProductName": "ProductName2", "ProductID": "2"}] }, index: 0 }).data("kendoComboBox"); }); </script> ``` As you see the disabled text input is visually different from the kendoComboBox widget. Is there a way to add or remove k-state-disabled class to text inputs when the disabled state changes in application scope? I want to have the same behaviour as widgets for my text inputs.

Original source