Html 禁用 KendoUI 下拉列表选项
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/17548168/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Disabling KendoUI drop down list options
提问by CoffeeCode
How to disable an option of a kendoiu drop down list?
I couldn't find how to accomplish this in their documentation...
如何禁用剑道下拉列表的选项？
我在他们的文档中找不到如何完成此操作...
回答by Alex Filipovici
Try the following approach (hereand herethere are some demos): use a templatefor your items, which conditionally adds a class to the items to be disabled. The info about which items should be disabled comes from the underlying data objects.
尝试以下方法（这里和这里有一些演示）：为您的项目使用模板，它有条件地向要禁用的项目添加一个类。关于哪些项目应该被禁用的信息来自底层数据对象。
HTML:
HTML：
<script id="template" type="text/x-kendo-tmpl">
#
if (data.disabled != null) {#
<span class="tbd" > ${data.text} - is disabled </span>
# } else { #
<span>${data.text}</span > #
}#
</script>
<input id="color" value="1" />
jQuery and Kendo UI (note here the disabledextra property for the Orangeitem and the usage of the dataBound event):
jQuery 和 Kendo UI（注意这里橙色项的disabled额外属性和dataBound 事件的用法）：
var data = [{
text: "Black",
value: "1"
}, {
text: "Orange",
value: "2",
disabled: "disabled"
}, {
text: "Grey",
value: "3"
}];
$("#color").kendoDropDownList({
dataTextField: "text",
dataValueField: "value",
dataSource: data,
index: 0,
template: kendo.template($("#template").html()),
dataBound: function (e) {
$(".tbd").parent().click(false);
}
});
CSS for graying out:
用于灰显的 CSS：
.tbd{
color:#777777
}
回答by Jonathan M
While the accepted answer will prevent a click on the item, it still allows keyboard navigation (and feels pretty hackish).
虽然接受的答案会阻止点击该项目，但它仍然允许键盘导航（并且感觉很hackish）。
Using the DataItems to identify which item should be disabled is indeed the way to go, but instead of removing the click handler, it is simpler to implement a Selecthandler that will stops the chain. This method is supported and documentedby Kendo :
使用 DataItems 来确定应该禁用哪个项目确实是可行的方法，但与删除点击处理程序不同，实现一个Select停止链的处理程序更简单。Kendo支持并记录了此方法：
Fired when an item from the popup is selected by the user either with mouse/tap or with keyboard navigation.
...
e.preventDefault Function
If invoked prevents the select action. The widget will retain the previous selected item.
当用户使用鼠标/点击或键盘导航选择弹出窗口中的项目时触发。
...
e.preventDefault 函数
如果调用会阻止选择操作。小部件将保留上一个选定的项目。
All that remains is to detect if we want to cancel the selection or not, which is trivial if your data item keeps a property that identifies whether it is available or not :
剩下的就是检测我们是否要取消选择，如果您的数据项保留一个标识它是否可用的属性，这很简单：
function Select(e) {
if (e.sender.dataItem(e.item).disabled) {
e.preventDefault();
}
}
Using a template to inject a specific class is not needed, but I would still recommend it if only to enable a proper styling.
不需要使用模板来注入特定的类，但如果只是为了启用正确的样式，我仍然会推荐它。
回答by Nick
回答by DinoMyte
Kendo currently doesn't support such functionality but this is easiest hack I found to disable an option in Kendo Dropdown.
Kendo 目前不支持这样的功能，但这是我发现禁用 Kendo Dropdown 中的一个选项的最简单的方法。
$("#" + id + "_listbox .k-item")[index].disabled = true;
where id -> ID of your dropdown
index -> position of the element in the dropdown you want to disable.
其中 id -> 下拉
索引的ID
-> 要禁用的下拉列表中元素的位置。
Hope it helps. Enjoy :)
希望能帮助到你。享受 ：）
回答by Parthiv Pandya
You could try something like this:
你可以尝试这样的事情：
var dropDown = $("#yourDropdown").data("kendoDropDownList");
dropDown.enable(false);
Try other way for specific index
var dropDown = $("#color").data("kendoDropDownList");
$("#color" + "_listbox .k-item")[index].disabled = true;
$("#color" + "_listbox .k-item").eq(index).addClass("tbd");
Fiddler for reference :- http://jsfiddle.net/xLs4n9dm/2/
回答by Steve Wright
If you want to disable the entire control and you are using the MVC fluent API, then you can use the .HtmlAttributes() method:
如果你想禁用整个控件并且你正在使用 MVC fluent API，那么你可以使用 .HtmlAttributes() 方法：
@Html.Kendo()
.DropDownList()
.HtmlAttributes(new { @disabled = "disabled" })
回答by Jaimin
Try like this
像这样尝试
$('#YourDropDown').attr('disabled', 'disabled');
