Kendo MultiSelect 使值被选择和禁用答案

【问题标题】：Kendo MultiSelect make value to be selected and disableKendo MultiSelect 使值被选择和禁用
【发布时间】：2020-04-10 09:24:27
【问题描述】：

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

DEMO IN 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");
      } 
    }
  },

});

【问题讨论】：

所以澄清一下，您想预先填充选定的项目并禁用 multiselct 添加或删除项目？

标签： javascript jquery kendo-ui kendo-grid kendo-multiselect

【解决方案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() 将阻止用户选择符合条件的选项。

Updated Demo

【讨论】：

【解决方案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,
  //...
});

working demo

【讨论】：