jstree disable checkbox

Question

I am currently working on some POC using JS Tree plugin and related check box plugin. For certain nodes I need to check the check box by default and disable any further selection.I found the function to hide the check box

.bind("load_node.jstree", function (e, data) {
          $(this).find('li[rel!=file]').find('.jstree-checkbox:first').hide();
      });

instead of hiding the check box completely I want to find a way to disable check box for certain nodes

Answer 1

You will need to define a "disabled" type (using the types plugin) and then assign that type to the desired node.

Take for instance this "disabled" type definition:

           "types" : {
                "types": {
                "disabled" : { 
                      "check_node" : false, 
                      "uncheck_node" : false 
                    } 
                }
            }

and the type assigment:

$.jstree._reference('#tree').set_type("disabled", "#node5");

More info on the types plugin can be found here and you can also check this google group with more info on disabling checkboxes

Hope it helps!

Answer 2

Thank you to mcabral and Tomasz for their answer. It helped me to achieve the right result. However, I needed to add some extra lines in order to get it working properly. Here is what I did:

You need to add two attributes to the <li> tag wich are the rel='disable' to indicate jstree that this will be the new type for the checkbox, instead of default and the class='jstree-checked' attribute which will pre-check the checkboxes when loading the tree.

$rel = ( 'if the checkbox need to be pre-checked' )? 'rel="disabled" class="jstree-checked"' : '';
            echo '<li id="checkbox_id" '. $rel .'>';

Then based on the previous answer you need to define the 'disable' type that was used in the rel attribute as follows:

.jstree({
                    "types" : 
                    {
                        "types" : {
                            "disabled" : {
                                 "check_node" : false, 
                                 "uncheck_node" : false 
                            }
                        }
                    },
        "plugins" : ["themes","html_data","ui","crrm","types", "checkbox"],
                    "checkbox" : { "two_state" : true },
    })

Answer 3

If your item is static; for example.... always there like in my scenario.

I just simply hid the checkbox on that item with CSS. As I do server side checking, any malicious attempt at altering it will be discarded anyway.

#my_item_id .jstree-checkbox {
    display: none;
}