禁用 KendoUI 下拉列表选项

Posted 2023-05-07

【中文标题】禁用 KendoUI 下拉列表选项

【英文标题】：Disabling KendoUI drop down list options

【发布时间】：2013-07-07 01:21:05

【问题描述】：

如何禁用 kendoiu 下拉列表的选项？ 我在他们的文档中找不到如何做到这一点...

【参考方案1】：

尝试以下方法（here 和here 有一些演示）：为您的项目使用template，这有条件地为要禁用的项目添加一个类。有关应禁用哪些项目的信息来自底层数据对象。

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 和 Kendo UI（注意这里 Orange 项的 disabled 额外属性和 dataBound event 的用法）：

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：

.tbd
   color:#777777

【讨论】：

这行得通，但我正在尝试找到一种动态方法，但到目前为止似乎不可能

非常适合我。

此解决方案不会阻止键盘导航。请参阅下面的答案以获取替代方法。

【参考方案2】：

虽然接受的答案会阻止点击该项目，但它仍然允许键盘导航（并且感觉很hackish）。

使用 DataItems 来确定应该禁用哪个项目确实是可行的方法，但不是删除单击处理程序，而是实现将停止链的Select 处理程序更简单。这个方法是剑道的supported and documented：

当用户选择弹出窗口中的项目时触发 鼠标/点击或键盘导航。

...

e.preventDefault 函数

如果调用会阻止选择操作。小部件将保留 上一个选择的项目。

剩下的就是检测我们是否要取消选择，如果您的数据项保留一个标识它是否可用的属性，这很简单：

function Select(e) 
    if (e.sender.dataItem(e.item).disabled) 
        e.preventDefault();
    

不需要使用模板来注入特定的类，但如果只是为了启用正确的样式，我仍然会推荐它。

【参考方案3】：

基于问题here，您可以像这样访问相关项目并更改属性：

var ds = $('#YourCombo').data().kendoComboBox.dataSource;

//someIndex is the index of the item in the dataSource
ds.data()[someIndex].set("enabled","False");

【讨论】：

我可以看到这对文本是如何工作的，但不确定是否可以禁用该选项。下拉列表上是否应该有一些额外的绑定？

【参考方案4】：

Kendo 目前不支持此类功能，但这是我发现禁用 Kendo Dropdown 选项的最简单方法。

$("#" + id + "_listbox .k-item")[index].disabled = true;

其中 id -> 下拉列表的 ID index -> 要禁用的下拉列表中元素的位置。

希望对您有所帮助。享受:)

【讨论】：

那你会怎么把那个项目变灰呢？

这太疯狂了......我喜欢它......多么快速和完美的解决方案

@Shardul : 你可以试试这个，它有效 $("#ID.k-item")[0].style.cssText = "color: lightgrey"

【参考方案5】：

你可以试试这样的：

 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/

【讨论】：

这只会禁用下拉菜单。 OP 只想禁用一个项目。

【参考方案6】：

如果你想禁用整个控件并且你正在使用 MVC fluent API，那么你可以使用 .HtmlAttributes() 方法：

@Html.Kendo()
.DropDownList()
.HtmlAttributes(new  @disabled = "disabled" )

【参考方案7】：

这样试试

    $('#YourDropDown').attr('disabled', 'disabled');

【讨论】：

这会禁用下拉列表，而不是一个选项。