Hiding checkboxes in jsTree

Question

I'm using jsTree with the checkbox plugin to show a tree. I'm just using an unordered list (UL, LI) to define my tree, and then:

    $(function() {
        $("#treeId").jstree({
        "themes" : {
            "theme" : "default",
            "dots": true,
            "icons": false
         },
            "plugins": ["themes", "html_data", "checkbox",
                        "ui", "crrm", "hotkeys"]
        });
    });

I use this to generate the tree. I need some way to hide the checkboxes on certain nodes. Ideally, I would add a class to the nodes on which I don't want checkboxes and then use JavaScript to hide them accordingly, but I haven't found a way to do this yet. Some solutions use JSON attributes to identify nodes, but since I'm not using JSON, I'm not sure I can use this method.

I should mention my end goal is to hide checkboxes on all non-leaf nodes, but a generic solution based on class would be more helpful. Or both solutions would be great too :)

Thanks!

Mike

Answer 1

If you are not making changes to the functionality, and just want to visually hide the checkbox for certain nodes, you should use CSS.

For example, your end goal is to hide checkboxes for all non-leaf nodes, here is the CSS needed to achieve that.

// First hide all checkboxes
ins.jstree-checkbox {
    display:none;
}

// Then display only checkboxes on leaf nodes
li[class~="jstree-leaf"] > a > ins.jstree-checkbox {
    display: inline-block;
} 

Btw might I ask why you cannot use Chrome at work? I used the execellent developer tools in Chrome to help me decipher the jstree styles to figure out the CSS above.

Answer 2

Not knowing much about jsTree, it would seem logical to me that you could simply look at DOM in chrome to identify which nodes you want to hide. Or find the specific id or footprint the checkbox plugin creates, for the checkboxes in the DOM. Then once you know this, you can easily enumerate through them and hide them using jQuery or pure javascript.

Answer 3

Finally got this working. I added a class="node" to all nodes where I wanted to hide the checkboxes, then after the tree is loaded I do this bit of javascript:

$(".node").children().hide();

Hope this helps anybody with the same problem.

Answer 4

Simply add in CSS:

.jstree-leaf .jstree-checkbox {
    display: none;
}