[英]How to restrict user to select only one child from parent node Kendo Tree view MVC
我想讓用戶 select 只有一個來自父節點的子節點,意味着
考慮一個 treeview
P1
P2
P3
這里用戶可以 select 多個子節點,但限制是用戶只能 select 一個子節點在一個父節點
我找到了一個小提琴鏈接,一旦你 select 一個孩子,它就可以禁用選擇,但它會禁用所有節點,並且我無法禁用這些復選框,直到其父級。
我改變了 javascript 與
$("#treeview").kendoTreeView({
checkboxes: {
checkChildren: true,
template:"# if(!item.hasChildren){# <input type='checkbox' name='checkedFiles[#= item.id #]' value='true' />#}#"
},
dataSource: [
{ id: 1, text: "My Documents", expanded: true, spriteCssClass: "rootfolder", items: [
{ id: 2, text: "Kendo UI Project", expanded: true, spriteCssClass: "folder", items: [
{ id: 3, text: "about.html", spriteCssClass: "html" },
{ id: 4, text: "index.html", spriteCssClass: "html" },
{ id: 5, text: "logo.png", spriteCssClass: "image" }
]
},
{ id: 6, text: "New Website", expanded: true, spriteCssClass: "folder", items: [
{ id: 7, text: "mockup.jpg", spriteCssClass: "image" },
{ id: 8, text: "Research.pdf", spriteCssClass: "pdf" },
] }
] },
{ id: 9, text: "Reports", expanded: true, spriteCssClass: "folder", items: [
{ id: 10, text: "February.pdf", spriteCssClass: "pdf" },
{ id: 11, text: "March.pdf", spriteCssClass: "pdf" },
{ id: 12, text: "April.pdf", spriteCssClass: "pdf" }
] }
]
});
$('#treeview').on('click', 'input:checkbox', function(){
var checkboxes = $('#treeview input:checkbox');
var selected = checkboxes.filter(':checked');
checkboxes.not(selected).prop('disabled', selected.length > 0)
})
我試圖找到它最接近的('ul').find('li input')然后限制只禁用那個ul,但它在jquery中不起作用。
您可以使用檢查事件來做到這一點。 在用戶選中或取消選中復選框后觸發。 如果 checkChildren 為 true,則在更新所有檢查狀態后觸發事件。 此事件已在 2014.2.828 之后的內部版本中引入。
<div id="treeview"></div>
<script>
$("#treeview").kendoTreeView({
checkboxes: true,
dataSource: [
{ text: "foo", items: [
{ text: "bar" }
] }
],
check: function(e) {
console.log("Checking", e.node);
var checkboxes = $(e.node).parent().find("input:checkbox");
var selected = checkboxes.filter(':checked');
checkboxes.not(selected).prop('disabled', selected.length > 0);
}
});
</script>
你可以在這里查看詳細信息
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.