如何禁用 Kendo UI 多选选项？任何 JSFiddle 示例？

Question

我无法在 document.ready() 函数中禁用 kendo ui 多选控件的特定选项。以下代码不会在加载时禁用 Item1。

<select id="multiselect" multiple="multiple">
    <option disabled="disabled">Item1</option>
    <option>Item2</option>
</select>

任何帮助将不胜感激。

谢谢

Answer 1

如果您想在初始化多选之前禁用某个选项：

  $(document).ready(function() {
    $("#multiselect option").eq(0).prop("disabled", "disabled");        
    $("#multiselect").kendoMultiSelect({});
  });

但是，如果多选已经初始化，那么你需要销毁小部件，更新选项并重新初始化小部件：

<div id="msCont">  
  <select id="multiselect" multiple="multiple">
    <option value="1">Item1</option>
    <option value="2">Item2</option>
    <option value="3">Item3</option>
    <option value="4">Item4</option>
    <option value="5">Item5</option>
  </select>
</div>

$(document).ready(function() {
    //Init widget
    $("#multiselect").kendoMultiSelect({});
    //Destroy widget
    var multiselect = $("#multiselect").data("kendoMultiSelect");
    multiselect.destroy();
    //KendoUI seems to leave behind some widget divs, so remove them
    // using container div as selector
    $("#msCont").find(".k-multiselect-wrap").remove();
    $("#msCont").prepend($("#multiselect")).find(".k-widget").remove();
    //update the option and re-initialize
    $("#multiselect option").eq(0).prop("disabled", "disabled");        
    $("#multiselect").kendoMultiSelect({});     
});

DEMO