8

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.

Community
  • 1
  • 1
Orbitum
  • 1,585
  • 5
  • 27
  • 47

2 Answers2

14

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

vakata
  • 3,726
  • 1
  • 17
  • 31
  • I am using `tie_selection:false`, but if I will use `.disable_node()` then it will not set node to "unclickable" at all? Will `select_node` events trigger? – Orbitum May 15 '15 at 09:08
  • In that case the above solution will not work, I will see if I can think of a way to disable the checkbox only. – vakata May 15 '15 at 09:57
  • It would be great! I will be looking forward for your solution. – Orbitum May 15 '15 at 12:13
  • I will add a state property for disabling the checkbox, it will be live in a day or two. – vakata May 21 '15 at 19:12
  • @Orbitum I just updated my answer to reflect the latest changes to the jsTree API - you can get the code from the repo. – vakata May 25 '15 at 17:48
  • Awesome! I will try it ASAP! Thank you for such an operative answer and godlike support :) – Orbitum May 26 '15 at 09:39
  • 4
    When a checkbox is disabled it seems that you can still check/uncheck it by clicking anywhere else on the node... – Simon Baars Jun 26 '18 at 06:15
5

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.

Khateeb321
  • 1,861
  • 23
  • 25