剣道ドロップダウンリストのオプションを無効にするには?
ドキュメントでこれを達成する方法を見つけることができませんでした...
7 に答える
次のアプローチを試してください (こことここにいくつかのデモがあります):項目にテンプレートを使用します。これにより、無効にする項目に条件付きでクラスが追加されます。無効にする必要がある項目に関する情報は、基になるデータ オブジェクトから取得されます。
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
}
受け入れられた回答はアイテムのクリックを防ぎますが、それでもキーボード ナビゲーションを許可します (かなりハックな感じがします)。
DataItems を使用して無効にする必要があるアイテムを特定するのが実際の方法ですが、クリック ハンドラーを削除する代わりにSelect
、チェーンを停止するハンドラーを実装する方が簡単です。このメソッドはKendo によってサポートされ、文書化されています。
ユーザーがマウス/タップまたはキーボード ナビゲーションでポップアップの項目を選択すると発生します。
...
e.preventDefault 関数
呼び出された場合、選択アクションが妨げられます。ウィジェットは、以前に選択したアイテムを保持します。
残っているのは、選択をキャンセルするかどうかを検出することだけです。これは、データ項目が利用可能かどうかを識別するプロパティを保持している場合は簡単です。
function Select(e) {
if (e.sender.dataItem(e.item).disabled) {
e.preventDefault();
}
}
テンプレートを使用して特定のクラスを挿入する必要はありませんが、適切なスタイリングを有効にするためだけに使用することをお勧めします。
剣道は現在そのような機能をサポートしていませんが、これは剣道ドロップダウンのオプションを無効にする最も簡単な方法です。
$("#" + id + "_listbox .k-item")[index].disabled = true;
where id -> ドロップダウン
インデックスの ID -> 無効にするドロップダウン内の要素の位置。
それが役に立てば幸い。楽しみ :)
次のようなことを試すことができます:
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/
コントロール全体を無効にする必要があり、MVC fluent API を使用している場合は、.HtmlAttributes() メソッドを使用できます。
@Html.Kendo()
.DropDownList()
.HtmlAttributes(new { @disabled = "disabled" })
このようにしてみてください
$('#YourDropDown').attr('disabled', 'disabled');