Question

Can anyone tell me how to disable a div or elements inside a div?
I have a jstree in my div and I want to disable the div/jstree.

Thanks!

Answer 1

I made a simple example for you here
Basically, it creates a div over your jstree’s one so that it is disabled from user interactions.
I guess you can make it visually better, but i think this gives you the idea.
I also checked that there is no strigth way to disable a jstree, even if it could be usefull.
Maybe you’d want to ask the dev in google group…

HTML Code:

<button id="disable">Disable</button>
<button id="enable">Enable</button>
<div id="jstree-wrapper">
    <div id="demo" style="height:100px;">
        <ul>
            <li id="node_1_id">
                <a>Root node 1</a>
                <ul>
                    <li id="child_node_1_id">
                     <a>Child node 1</a>
                 </li>
                 <li id="child_node_2_id">
                     <a>Child node 2</a>
                 </li>
             </ul>
         </li>

     </ul>
     <ul>
                    <li><a>Team A's Projects</a>
                        <ul>
                        <li><a>Iteration 1</a>
                            <ul>
                                <li><a>Story A</a></li>
                                <li><a>Story B</a></li>
                                <li><a>Story C</a></li>
                            </ul>
                            </li>
                        <li><a>Iteration 2</a>
                        <ul>
                            <li><a>Story D</a></li>
                              </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
    </div>

    <div id="disabler"></div>
</div>​

CSS code:

#jstree-wrapper {
    position: relative;
}

#disabler {
    position: absolute;
    top: 0px;
    left: 0px;
    background-color: black;
    opacity: 0.5;
}​

JS Code:

$(document).ready(function() {

    $("#demo").jstree();

    $("#disable").on("click", function() {
        $("#disabler").css("width", $("#demo").width());
        $("#disabler").css("height", $("#demo").height());
    });

    $("#enable").on("click", function() {
        $("#disabler").css("width", "0px");
        $("#disabler").css("height", "0px");
    });

});