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.

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.

• javascript
• jquery
• jstree

• You can use the normal JStree events and bog standard JQuery / Javascript for this. Nothing special is required of JSTree. Basically, do something in the JSTree load function to loop all checkboxes and disable them. Then in the JSTree selection function, enable what you need. – webnoob Commented Apr 3, 2013 at 10:36
• can you create this html and suggest a FIDDLE? – Jai Commented Apr 3, 2013 at 10:38
• The problem is I don't have input of checkbox type so I can disable them... – MarGa Commented Apr 3, 2013 at 10:56
• @webnoob I would be really grateful if you give us an example with Fiddle :) Thanks in advance – MarGa Commented Apr 3, 2013 at 14:42

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