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
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!
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 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 ''; 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 }, })