Search code examples
jqueryztree

How can I unchecked parent node if checked any child node in ztree?


Now in ztree, if checked any child node then it checked it's parent node also, but I want not to check it's parent node. Is there any way ?

var setting = {
        view: {
            dblClickExpand: true,
            selectedMulti: false,
            showLine: false,
            nameIsHTML: true,

        },
        check: {
            enable: true,                
        },
        data: {
            simpleData: {
                enable: true
            }
        },           
    };

Solution

  • As per documentation:

    setting.check.chkboxType:

    When one node is checked or unchecked, control its parent node and its child node auto checked or unchecked. It is valid when [setting.check.enable = true & setting.check.chkStyle = "checkbox"]

    Default: { "Y": "ps", "N": "ps" }

    Hence, I suggest to use:

    check: {
         enable: true,
        chkboxType: { "Y": "s", "N": "s" }
    },
    

    var setting = {
        view: {
            dblClickExpand: true,
            selectedMulti: false,
            showLine: false,
            nameIsHTML: true,
    
        },
        check: {
            enable: true,
            chkboxType: { "Y": "s", "N": "s" }
        },
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var zTreeObj;
    var zNodes = [
        {name:"test1", open:true, children:[
            {name:"test1_1"}, {name:"test1_2"}]},
        {name:"test2", open:true, children:[
            {name:"test2_1"}, {name:"test2_2"}]}
    ];
    
    zTreeObj = $.fn.zTree.init($("#treeDemo"), setting, zNodes);
    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zTree/zTree_v3@master/css/demo.css" type="text/css">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/zTree/zTree_v3@master/css/zTreeStyle/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/zTree/zTree_v3@master/js/jquery.ztree.all.js"></script>
    
    
    <div>
        <ul id="treeDemo" class="ztree"></ul>
    </div>