Disable certain checkboxes from Jstree

Question

So I have a Checkbox Tree created with JsTree. What I want to do is to set all the checkboxes initially to disabled and then I have an Array that contains the ids of the li tags. by browsing the table I should enable the checkboxes that belong to the tag with the specific id. When checked the Tree should respect the same orders as the default one (when parent checked enabled children should be checked as well ... etc). How can I proceed ? Thanks in advance. PS: The JsTree Plugin is wonderful. However it lacks a lot of documentation.

Answer 1

You should overwrite default behaviour of check_node and uncheck_node functions, and create own disabled node type.

The code:

$('#tree').jstree({
    'plugins' : ['themes', 'html_data', 'checkbox', 'types'],
    'checkbox' : {
      'two_state' : true // Nessesary to disable default checking childrens
    },
    "types" : {
      "types": {
        "disabled" : { // Defining new type 'disabled'
          "check_node" : false, 
          "uncheck_node" : false 
        }, 
        "default" : { // Override default functionality
          "check_node" : function (node) {
            $(node).children('ul').children('li').children('a').children('.jstree-checkbox').click();
            return true;
          },
          "uncheck_node" : function (node) {
            $(node).children('ul').children('li').children('a').children('.jstree-checkbox').click();
            return true;
          }
        } 
      }
    }
});

Now to disable a node, add attribute rel="disabled" to their li tag.

Here is an example on JSFiddle.