JsTree checkbox - event check

Question

I have jstree

using this code:

var Tree = $("#MyTree"); Tree.jstree({ "core": { "themes": { "responsive": false, "multiple" : false, }, "data": dataTree }, "types": { "default": { "icon": "icon-lg" }, "file": { "icon": "icon-lg" } }, "ui": { "select_limit": 1, }, "plugins": ["wholerow", "types", "checkbox", "ui", "crrm", "sort"], "checkbox": { "three_state": false, "real_checkboxes": false } }); 

I need to separate the selection and validation action, the user must check all the node he wants, but select only one row for the time. at the moment, when I click throughout the line, it selects this line and checks that node, I need to check the box only if the user clicks on it.

I try so many events, but the only thing that works:

 Tree.on("changed.jstree", function (e, data) { }); 

which capture both the action of choice and verification.

Any suggestions?

Answer 1

This answer is for jstree release 3 - this is what you should use in 2016. Unfortunately your code sample seems to be using jstree rel 1, and I can't help you.

For release 3

First of all, release the selected and checked states (checkbox.tie_selection: false) - see documents

Then use the check_node.jstree event

Working example

 var data1 = [{ "id": "W", "text": "World", "state": { "opened": true }, "children": [{"text": "Asia"}, {"text": "Africa"}, {"text": "Europe", "state": { "opened": false }, "children": [ "France","Germany","UK" ] }] }]; $('#Tree').jstree({ core: { data: data1, check_callback: false }, checkbox: { three_state : false, // to avoid that fact that checking a node also check others whole_node : false, // to avoid checking the box just clicking the node tie_selection : false // for checking without selecting and selecting without checking }, plugins: ['checkbox'] }) .on("check_node.jstree uncheck_node.jstree", function(e, data) { alert(data.node.id + ' ' + data.node.text + (data.node.state.checked ? ' CHECKED': ' NOT CHECKED')) }) 

 <link href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" type="text/css" rel="stylesheet" /> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script> <div id="Tree"></div>