html - 禁用 KendoUI 下拉列表选项

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
}