将k-state-disabled类应用于文本输入 - Kendo UI

Question

这是我的jsfiddle 演示 。

    <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>

如您所见，禁用的文本输入在视觉上与kendoComboBox小部件不同。 当禁用状态在应用程序范围内发生变化时，是否有办法在文本输入中添加或删除k-state-disabled类？ 我希望与文本输入的小部件具有相同的行为。

Answer 1

我认为最简单，更便携的方法是在设置disabled属性值时添加/删除k-state-disabled 。

启用文本框的示例：

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

禁用它：

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

你的JSFiddle修改了两个按钮启用/禁用它http://jsfiddle.net/KrW6f/5/

编辑：另一种可能性是将字段定义为没有dataSource的autocomplete 。 那你实际上不需要定义任何CSS类。 您的输入字段定义为：

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

你可以在另一个JSFiddle中看到它： http ： //jsfiddle.net/OnaBai/94HDF/2/

Answer 2

如果您需要在准备就绪中执行此操作，那么这可能会有所帮助：

if ($('#textboxtest').attr('disabled')=='disabled')
    $('#textboxtest').addClass('k-state-disabled');
else
    $('#textboxtest').removeClass('k-state-disabled');