jsTree disable some of the checkboxes

Question

Using jsTree (3.1.0+) with checkbox plugin is it possible to allow not all checkboxes to check - disable some of them?

I found solution for old versions of jsTree here jstree disable checkbox but it didn't work on jsTree 3.1.0+ versions.

Solution of hiding checkbox jsTree Hide Checkbox is working, but if I click on the folder, hidden checkbox will be checked anyway.

Thanks.

Answer 1

Keep in mind unless you are using checkbox.tie_selection as false, selecting and checking are the same thing.

So you can simply call .disable_node() on the nodes you want disabled.

---

EDIT: Use the latest code from the repo (note - not 3.1.1, but the latest code): https://github.com/vakata/jstree/archive/master.zip

You can now specify the checkbox_disabled state:

<div id="jstree">
    <ul>
        <li data-jstree='{"checked":true}'>checked</li>
        <li data-jstree='{"checkbox_disabled":true}'>checked</li>
    </ul>
</div>

In JSON too of course:

{ "id" : "Test node", "state" : { "checkbox_disabled" : true } }

You can also change the disabled state of a checkbox at runtime using enable_checkbox(node) and disable_checkbox(node).

Answer 2

To completely hide checkbox from the specific node, add following JS code

$('#tree_2').on('ready.jstree', function () {
  $("#tree_2").jstree().get_node("node1_id").a_attr["class"] = "no_checkbox";
  $("#tree_2").jstree().get_node("node2_id").a_attr["class"] = "no_checkbox";

....
});

and in CSS, add the following style

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

It will completely hide checkbox from provided node id, this worked like a charm for me. Thanks to this link.