CODEWITHSUNDEEP
javascriptjqueryjstree
LGAP
LGAP

Reputation: 2463

Disable <li> tag contents using javascript

var inputs = document.getElementsByTagName("li");
for(var i = 0; i < inputs.length; i++)
{
    if(inputs[i].id.indexOf(startsWith) == 0) {
        eles.push(inputs[i].id);
    }
}
for(var j=0; j < eles.length; j++) {
    document.getElementById(eles[j]).setAttribute("class","jstree-checked");                
}

Am taking out the ids that starts with certain pattern in the li tags of my document.
I am changing the class of the li tags of the resulting ids.
I also need to disable the contents present in the li tag as a whole.
Is it possible to do this using javascript or jquery?

UPDATE:
I've a checkbox and text message inside each <li> tag.
Need to disable the checkbox(non clickable) and display the text as disabled.

<li id="1_1" class="jstree-leaf jstree-no-icons jstree-last jstree-leaf jstree-unchecked" crawllocation="D:\company\deploy\AppServer\fusionEAR.ear" name="fusionEAR.ear">
<ins class="jstree-icon"> </ins>
<a class="" href="#" style="">
<ins class="jstree-checkbox"> </ins>
<ins class="jstree-icon "> </ins>
fusionEAR.ear
</a>
</li>

Tried these:

for(var j=0; j < eles.length; j++){
//jQV6('#jstreeDivforBrowse').jstree("check_node","#"+eles[j]);
document.getElementById(eles[j]).setAttribute("class","jstree-default jstree-checked");
//$.jstree._reference('#jstreeDivforBrowse').set_type("disabled", "#"+eles[j]); -- First try to disable
//eles[j].disabled = true;-- Second try to disable
//$("#"+eles[j]).attr('disabled', 'true');-- Third try to disable
//$("#"+eles[j]).addClass("jstree-leaf jstree-no-icons jstree-last jstree-leaf jstree-checked").find(":input").attr("disabled", "disabled");-- Fourth try to disable
        }

In any of these tries I couldnt find my checkbox disabled. But the task of selecting the check box is successful for required ids by changing the class name inside the loop as given.

Upvotes: 0

Views: 7987

Answers (2)

Mehavel
Mehavel

Reputation: 595

the types plugin can be used to customize the nodes in jstree.

 types: {
    "disabled": {
        "select_node": false,
        "open_node":   false,
        "close_node":  false,
        "create_node": false,
        "delete_node": false
    }
}

Note we defined a Type and named it as disabled, so we have add the attribute rel as disabled to the <li> element to make it disabled. This is how jsTree look for type using the rel attribute.

with the Type being declared, in your loop just add,

document.getElementById(eles[j]).setAttribute("rel","disabled");

I hope this helps you.

Upvotes: 2

Cris
Cris

Reputation: 13351

use $("/* li element*/").attr("disabled", "disabled"); to disable it

or $("/* li element*/").hide(); to hide it

in your case 

for(var j=0; j < eles.length; j++) {
$("#"+eles[j]).addClass("jstree-checked").find(":input").attr("disabled", "disabled");

}

Upvotes: -1

Related Questions