将k-state-禁用类应用到文本输入- Kendo UI。

Here is my jsfiddle demo.

这是我的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.

您可以看到，禁用的文本输入与kendoComboBox小部件的视觉效果不同。是否有一种方法可以在应用程序范围内的禁用状态更改时将k-state-禁用类添加到文本输入中?我希望将相同的行为作为文本输入的小部件。

2 个解决方案

#1

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.

我认为最简单和更可移植的方法是在设置禁用的属性值时添加/移除k-state-disabled。

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/

您的JSFiddle修改了两个按钮来启用/禁用它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:

编辑:另一种可能性是将字段定义为没有数据源的自动完成。实际上，您不需要定义任何CSS类。输入字段的定义是:

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

您可以在其他JSFiddle中看到:http://jsfiddle.net/OnaBai/94HDF/2/。

#2

If you need to do this in the on ready then this might help:

如果你需要在准备就绪时这样做，这可能会有帮助:

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

#1