jquery - 如何限制用户从父节点 Kendo Treeview MVC中只选择一个 child

Question

我希望允许用户从父节点中只选择一个子节点，意思是
考虑 Treeview
P1

C1

C2

C3

P2

A1

A2

A3

P3

S1

S2

S3

这里用户可以选择多个子节点，但限制是用户只能在一个父节点中选择一个子节点
我找到了一个它的 fiddle 链接，一旦你选择了一个 child ，它就可以禁用选择，但它会禁用所有节点，而且我无法禁用那些复选框直到它的父节点。
here is the link
我改变了那个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 中不好。

Answer 1

您可以使用 check 事件来完成。在用户选中或取消选中复选框后触发。如果 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>

你可以看到细节 here