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

Viewed 38739

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.

2 Answers
Related