jsTree Hide Checkbox

Question

I am using the jsTree jQuery plugin to display a 5 level deep tree. I would like to not show checkboxes on the last level. Is there any way to do that in the setting or some jquery processing I can do afterwards to remove those checkboxes? I am able to disable them using they types plugin, but I really want them to not be visible.

Here is an exmple of my tree "[x]" = a checkbox

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
        [x] lvl 5a
        [x] lvl 5b
        [x] lvl 5c

Here is an exmple of what I want "[x]" = a checkbox

[x] lvl 1
  [x] lvl 2
    [x] lvl 3
      [x] lvl 4
          lvl 5a
          lvl 5b
          lvl 5c

EDIT ANSWER FOUND

Found the answer. Add the .bind that will get called when the tree is loaded then some simple jquery to hide the checkbox.

$("#right-tree2").bind("loaded.jstree", function(event, data) {
   $('.lvl4').find('ins.jstree-checkbox').hide();
})
.jstree({....});

You have to check for the last path in your tree. The last element has neither next sibling nor a children. If so you read the parent node and remove or hide childrens checkboxes. I think you should outsourced this code in an extra function and call it after the tree has been generated. I know this not very effective, but a way that can work. — Reporter, May 24 '11 at 15:13
Ok, I was able to remove the nodes but with one small problem. If I call $('.lvl4').find('ins.jstree-checkbox').hide(); on a button click it works but not right after the .jstree call. Is there a way to execute a command after the tree is done rendering? — jrock10, May 24 '11 at 16:44
I don't know your source code,so I cannot say if its possible. — Reporter, May 24 '11 at 19:33

Migwell · Answer 1 · 2020-06-26T01:59:30.820

If you're creating the tree from JSON, then I've found the easiest way to remove the nodes is using some css.

In the actual JSON, set the a_attr field of the nodes you want to be disabled to "no_checkbox" as below. This will add the class "no_checkbox" to the <a> element that contains the node text, icons and checkboxes.
```
node = {
    text: "foo",
    a_attr: {
        class: "no_checkbox"
    }
}
```

In the css, create a selector like this:

.no_checkbox>i.jstree-checkbox
{
    display:none
}

Done!

This will only select checkboxes that are directly inside the <a> element with the no_checkbox class, and it will remove them from the layout. The advantage of this method over the other answers is that you can bring back the checkbox just by removing the class no_checkbox from the <a> element. For example you can do this in the event handlers for the select_node.jstree event, and then get the DOM node that's passed in as an argument.

Of course if you're inputting data using HTML instead of JSON, you can just add the css class into the html manually, or using php/other server side language, and it will work just the same.

score 4 · Answer 2 · answered Mar 14 '18 at 10:51

To completely hide checkbox from the specific node giving that node data is coming from server, add following JS code

$('#tree_2').on('ready.jstree', function () {
  $("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
  $("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";

....
});

and in CSS, add the following style

.no_checkbox > i.jstree-checkbox {
 display: none;
}

It will completely hide checkbox from provided node id, this worked like a charm for me. Thanks to this link.

score 2 · Answer 3 · edited Nov 29 '11 at 17:44

You can also prevent the checkbox plugin from adding them:

Add a class to the <a> tag of any node type that you do not want to have a checkbox (I used the same as my rel).

Edit jquery.jstree.js Checkbox plugin to add the classes to the .not() statement where the checkboxes are added to the DOM. In 1.0-rc3 it looks like this (around line 2870):

$t.children("a" + (_this.data.languages ? "" : ":eq(0)") ).not(":has(.jstree-checkbox) // ADD THE LIST OF CLASSES HERE - BE SURE TO INCLUDE THE DOTS AND SEPARATE WITH COMMAS ").prepend("<\ins class='jstree-checkbox'>&#160;<\/ins>").parent().not(".jstree-checked, .jstree-unchecked").addClass( ts ? "jstree-unchecked" : c );

This way, you don't have to add, then remove them (bad practice if it can be avoided).

score 0 · Answer 4 · answered Apr 19 '13 at 06:13

try this,

$("#right-tree2").bind("loaded.jstree", function(e, data) {
    var currentNode = data.rslt.obj.attr("id");
    var nodeLevel = data.inst.get_path().length;
    if(nodeLevel == 4){
         $('#'+currentNode).find('> a > .jstree-checkbox').remove();
    }
})

score 0 · Answer 5 · answered May 31 '15 at 16:03

0

I found another solution using css. This simple code hides the checkbox in the first layer

.jstree-container-ul>li>a>i.jstree-checkbox
{
    display:none
}

answered May 31 '15 at 16:03

regufo

181
1
3

score 0 · Answer 6 · answered Apr 22 '20 at 21:34

I added onto @Migwell's answer for my own development in which I used the 'Types' jstree plugin.

For OP's use case, he could simply add a type to each level, or just one to the last level, whichever is easiest. The level he does not want checkboxes gets the class added to its a_attr's. The Types plugin's a_attr accepts an object.

            "types": {
                "lvl5": {
                    "a_attr": {class: "no_checkbox"}
                }

jsTree Hide Checkbox

6 Answers6

Linked