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

【问题标题】：Applying k-state-disabled class to text inputs - Kendo UI将 k-state-disabled 类应用于文本输入 - Kendo UI
【发布时间】：2013-12-27 18:38:02
【问题描述】：

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

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

【问题讨论】：

标签： javascript jquery kendo-ui

【解决方案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/

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

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

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

【讨论】：

但我必须调用这段代码，毕竟文本框的状态发生了所有可能的变化。我的部分文本框是通过 ajax 调用动态加载的。
您可以接受jsfiddle.net/OnaBai/94HDF/1 吗？我知道它需要两条指令，但您并没有在代码中添加太多逻辑。
是的@OnaBai，你是对的。我知道这段代码可以正常工作，但我正在寻找一种更通用的方法来做到这一点。考虑一个包含大量文本输入和触发启用/禁用的逻辑的详细用户界面。因此，我不想为每种情况添加 addClass / removeClass 行或为此目的调用另一个函数。不久，我想要一个像组合框小部件一样工作的 texbox。我想知道是否可以使用剑道 ui 框架。
有两种选择： 1) 创建自己的小部件，可能看起来太多但并不复杂，但当然您需要编写代码。 2) 将input 定义为autocomplete 而没有dataSource（请参见此处：jsfiddle.net/OnaBai/94HDF/2
第二个太实用了。我想我会去那里。非常感谢。

【解决方案2】：

如果您需要在准备好的情况下执行此操作，那么这可能会有所帮助：

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

【讨论】：

但我必须调用这段代码，毕竟文本框的状态发生了所有可能的变化。我的部分文本框是通过 ajax 调用动态加载的。
作为与@OneBai 对话的后续步骤，如果您想使用文本框，您可以像($('.k-textbox').addClass("k-state-disabled")) 或($('input[type=text]').addClass("k-state-disabled")) 一样选择它们，这样您就不必选择每个按 id 的文本框