how to create a checkbox tree with checkbox only at leaf nodes

Question

According to jstree all the nodes includes parent and childnodes will have the checkbox next to it by default.

jstree

but i want something like this jqueryeasyUI tree where there are options for cascade and leaf node check.

Edit: A sample has been given below.

<div id="jstree">
    <!-- in this example the tree is populated from inline HTML -->
    <ul>
      <li class="node" >Root node 1
        <ul>
          <li id="child_node_1">Child node 1</li>
          <li>Child node 2</li>
        </ul>
      </li>
      <li class="node" >Root node 2</li>
    </ul>
  </div>
  <button>demo button</button>

  <!-- 4 include the jQuery library -->
  <script src="dist/libs/jquery.js"></script>
  <!-- 5 include the minified jstree source -->
  <script src="dist/jstree.min.js"></script>
  <script>
  $(function () {
    // 6 create an instance when the DOM is ready
  $("#jstree").jstree({
      "checkbox": {
          "keep_selected_style": false
      },
      "plugins": ["checkbox"]
  });

  $(".node").find('> a > .jstree-checkbox').remove()
});
  </script>

Now im able to remove the checkbox for the parent nodes while collapsed but when expands it create checkbox next to it.

Anyone knows whether jstree provide options to check only leaf nodes rather than cascade check? If so please share the ideas.

Answer 1

I think the best solution from this post is as the following

The CSS solution will be fine

#id-here .jstree-open > .jstree-anchor > .jstree-checkbox,
#id-here .jstree-closed > .jstree-anchor > .jstree-checkbox { display:none; }

Answer 2

when i modified the jstree.min.js three_state: !1, from

three_state: !0 it worked.

the documentation says

/** * a boolean indicating if clicking anywhere on the node should act as clicking on the checkbox. Defaults to true . * @name $.jstree.defaults.checkbox.whole_node * @plugin checkbox */