将 k-state-disabled 类应用于文本输入 - Kendo UI [英] Applying k-state-disabled class to text inputs - Kendo UI
问题描述
这是我的 jsfiddle 演示.
<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>
<脚本>$(document).ready(function() {var products = $("#products").kendoComboBox({级联来自:类别",过滤器:包含",占位符:选择产品...",dataTextField: "产品名称",数据值字段:产品ID",数据源: {数据:[{产品名称":产品名称1",产品ID":1"},{产品名称":产品名称2",产品ID":2"}]},指数:0}).data("kendoComboBox");});
如您所见,禁用的文本输入在视觉上与 kendoComboBox 小部件不同.当禁用状态在应用程序范围内发生变化时,有没有办法在文本输入中添加或删除 k-state-disabled 类?我希望对我的文本输入具有与小部件相同的行为.
我认为最简单、更便携的方法是在设置 k-state-disabled
时添加/删除 k-state-disabled
code>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 类.您的输入字段定义为:
你可以在另一个 JSFiddle 中看到它:http://jsfiddle.net/OnaBai/94HDF/2/
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.
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/
这篇关于将 k-state-disabled 类应用于文本输入 - Kendo UI的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!