11

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

4

7 回答 7

17

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

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 事件的用法）：

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
}
于 2013-07-09T13:59:21.597 回答
5

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

使用 DataItems 来识别应该禁用哪个项目确实是要走的路，但不是删除点击处理程序，而是实现一个Select停止链的处理程序更简单。Kendo支持并记录了此方法：

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

...

e.preventDefault 函数

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

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

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

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

于 2016-05-03T15:12:02.127 回答
3

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

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

//someIndex is the index of the item in the dataSource
ds.data()[someIndex].set("enabled","False");
于 2013-07-09T12:33:28.303 回答
2

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

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

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

希望能帮助到你。享受 ：）

于 2014-02-06T18:17:00.313 回答
0

你可以尝试这样的事情：

 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/
于 2014-09-11T11:42:12.110 回答
-2

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

@Html.Kendo()
.DropDownList()
.HtmlAttributes(new { @disabled = "disabled" })
于 2015-09-14T10:43:42.003 回答
-4

像这样试试

    $('#YourDropDown').attr('disabled', 'disabled');
于 2013-07-09T12:57:57.630 回答