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({....});

Answer 1

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

1. 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"
       }
   }
   

2. In the css, create a selector like this:

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

3. 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.