jquery - 如何限制用户从父节点 Kendo Tree 视图 MVC 中仅选择一个子节点

问题描述

我想让用户从父节点中只选择一个孩子，意味着

考虑一个树视图

这里用户可以选择多个子节点，但限制是用户只能在一个父节点中选择一个子节点

我找到了一个小提琴链接，一旦你选择了一个孩子，它就可以禁用选择，但它会禁用所有节点，并且我无法禁用这些复选框，直到它的父级。

我用

            $("#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中不起作用，因为我不好。

标签： jqueryasp.net-mvckendo-asp.net-mvckendo-treeview

您可以使用检查事件来做到这一点。在用户选中或取消选中复选框后触发。如果 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>

你可以在这里查看详细信息

jquery - 如何限制用户从父节点 Kendo Tree 视图 MVC 中仅选择一个子节点

问题描述

解决方案

推荐阅读