Question

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

Answer 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
}

Answer 2

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

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

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

...

e.preventDefault功能

如果调用则阻止选择操作。小部件将保留   之前选择的项目。

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

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

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

Answer 3

根据问题here，您可以访问相关项目并更改属性，如下所示：

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

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

Answer 4

Kendo目前不支持此功能，但这是我发现在Kendo Dropdown中禁用选项的最简单的黑客攻击。

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

其中id - ＆gt;您的下拉列表的ID
index - ＆gt;要禁用的下拉列表中元素的位置。

希望它有所帮助。享受：）

Answer 5

您可以尝试这样的事情：

 var dropDown = $("#yourDropdown").data("kendoDropDownList");
 dropDown.enable(false);

Answer 6

试试这个

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

禁用KendoUI下拉列表选项

6 个答案: