禁用KendoUI下拉列表選項

16

試試下面的辦法（here和here有一些演示）：使用您的項目，其中有條件地增加了CLA一個template ss到要禁用的項目。有關哪些項目應禁用的信息來自底層數據對象。

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和劍道UI（這裏注意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 
}

來源

2013-07-09 13:59:21

+1

這就是我一直在尋找的！謝啦！ – CoffeeCode

+1

不錯的解決方案@亞歷 – Nick

+0

這個工程，但我試圖找到一個動態的方法，它似乎不可能到目前爲止 – Nick

3

基於問題here，你可以訪問相關項目和改變屬性，像這樣：

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

//someIndex is the index of the item in the dataSource 
ds.data()[someIndex].set("enabled","False");

來源

2013-07-09 12:33:28 Nick

+0

我可以看到這是如何工作的文字，但不知道它會解決禁用該選項..應該有一些額外的綁定下拉列表？ – CoffeeCode

-3

嘗試這樣

$('#YourDropDown').attr('disabled', 'disabled');

來源

2013-07-09 12:57:57 Jaimin

+1

這會禁用下拉列表，而不是選項。 –

2

劍道目前不支持這種功能，但這是最簡單的黑客，我發現禁用劍道下拉選項。

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

其中id - >您的下拉菜單的ID
指數 - >你要禁用的下拉列表中元素的位置。

希望它有幫助。享受:)

來源

2014-02-06 18:17:00 DinoMyte

+0

那麼你會如何灰化那件物品呢？ – Shardul

+0

這是crazzy ...我喜歡它..什麼是快速和完美的解決方案 –

+0

@Shardul：你可以試試這個，它的工作原理 $（「＃ID.k-item」）[0] .style.cssText =「顏色：lightgrey「 –

2

你可以嘗試這樣的事：

var dropDown = $("#yourDropdown").data("kendoDropDownList"); 
dropDown.enable(false);

來源

2014-09-11 11:42:12

+9

禁用整個下拉菜單，而不是單個選項... – Sebazzz

-1

如果要禁用整個控制和你正在使用的MVC流利的API，那麼你可以使用.HtmlAttributes（）方法：

@Html.Kendo() 
.DropDownList() 
.HtmlAttributes(new { @disabled = "disabled" })

來源

2015-09-14 10:43:42

3

雖然接受的答案將防止點擊該項目，但它仍然允許鍵盤導航（並感覺很駭人聽聞）。

使用DataItems來識別哪個項目應該被禁用，但的確是要走的路，但是實現一個Select處理程序將停止鏈，而不是去除click處理程序。這種方法是通過supported and documented劍道：

當從彈出的項目是由用戶選定的燃燒或者與鼠標/抽頭或與鍵盤導航。

...

e.preventDefault功能

如果調用阻止選擇操作。該小部件將保留前一個選定項目的。

剩下的工作就是檢測是否我們要取消選擇或沒有，這是平凡的，如果你的數據項保持標識是否可用與否屬性：

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

使用模板注入特定的類是不需要的，但我仍然會推薦它，如果只是爲了啓用適當的樣式。

來源

2016-05-03 15:12:02

禁用KendoUI下拉列表選項

回答

相關問題