Search code examples
javascriptjqueryjstree

How to disable nth level node if any (n-1)th node is selected in jsTree

Hi am using jsTree and created the below shown Tree

enter image description here

Now i want to disable n th node if (n-1) th node is selected,ie user cant able to select different level of nodes.

eg:

  1. if user selected Koramangala,then infosys,Accenture,TCS,IBM,Wipro and their child nodes should be disable
  2. If Bangalore is selected,Koramangala,electronicCity,WhiteField,Marathahally and their child should be disabled and disable same level childs in US& UK

Is it possible to achieve this requirement ????

Thanks in advance

Solution

  • You can use an attribute added by jsTree to all li elements - the aria-level attribute. It starts from 1 for root element and spans whole tree showing level for every node.

    You will have to do this:

    1. add some events to jsTree object - changed event to disable visible nodes from next level and below and open_node to update status of to-be disabled nodes previously hidden (non-existent in the DOM till this moment to be exact)
    2. add conditionalselect plugin to disallow node selection if node is disabled

    I kept the currently selected level in var currentlevel. You should check that it is kept local. Also you can surely optimize the code so it wouldn't repeat enable/disable functionality.

    Check demo - JS Fiddle