剑道多选使值被选择和禁用

Question

此处需要帮助。我在这里创建了一个简单的演示，以及如果checked='yes'节点被选中并从编辑中禁用(应用k-state-disable(，我想从dataBound实现什么。我尝试设置(selected,true)&(disabled,true)，但似乎不起作用。

DOJO 演示

<select id="multiselect"></select>
$("#multiselect").kendoMultiSelect({
dataSource: {
data: [
{id:1, Name: "John 1", checked: 'no'},
{id:2, Name: "John 2", checked: 'yes'},
{id:3, Name: "John 3", checked: 'no'},
{id:4, Name: "John 4", checked: 'yes'},
{id:5, Name: "John 5", checked: 'no'},
{id:6, Name: "John 6", checked: 'no'}
]
},
dataTextField: "Name",
dataValueField: "id", 
dataBound: function(e) {
var multiselect = $("#multiselect").data("kendoMultiSelect");
var x = multiselect.dataSource.view();
for (var i = 0; i < x.length; i++) {
if (x[i].checked == "yes") {
//x[i].set("selected", true);
//x[i].set("disabled ", true);
//x[i].prop("disabled", true).addClass("k-state-disabled");
} 
}
},
});

Answer 1

我想提出另一种实现这一目标的方法。尽可能避免更改dataBound中的DOM。因此，我建议使用itemTemplate选项和select事件：

您可以在itemTemplate选项中应用.k-state-disabled类：

itemTemplate: '<span # if (data.checked === "yes") { #class="k-state-disabled"# } #>#: Name #</span>'

这将使该选项看起来像已禁用。但仍然可以在列表中选择它，因此可以使用select事件来防止：

select: function(e) {
if (e.dataItem.checked === 'yes') {
e.preventDefault();
}
},

在该事件中使用e.preventDefault()将阻止用户选择与条件匹配的选项。

更新的演示

Answer 2

您需要处理select和deselect事件：

function onDeselect(e) {
if (e.dataItem.checked == 'yes') {
e.preventDefault();
}
}  

function onSelect(e) {
if(e.dataItem.checked == 'yes') {
e.preventDefault();
}
};  
$("#multiselect").kendoMultiSelect({
select: onSelect,
deselect: onDeselect,
//...
});

工作演示