[英]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.