Disable
tag contents using javascript

Question

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.

Its a checkbox that is generated by jstree automatically. hence only class name is there I suppose. — LGAP, Jan 23 '13 at 05:12
Further more can you provide an example of in ID that would be disabled and one that would not — Jon P, Jan 23 '13 at 05:13

Mehavel · Accepted Answer · 2013-01-30T10:52:22.343

2

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.

edited Jan 30 '13 at 10:52

answered Jan 23 '13 at 05:16

Mehavel

585
3
16

what if there are multiple childs of li? – Cris Jan 23 '13 at 05:17
@Cris you can find the number of childs using 'document.getElementById(inputs[0].id).childNodes.length' and traverse using the '[]' notation. – Mehavel Jan 23 '13 at 05:24
@Cris i have updated the fiddle as well. the jquery code will check if it has multiple checkbox elements – Mehavel Jan 23 '13 at 05:56
@LGAP I just checked the fiddle and it seems to work fine. could you please throw some light on the case it failed? – Mehavel Jan 29 '13 at 10:09
@LGAP updated the fiddle.Could you please check and let me know if the code helps – Mehavel Jan 29 '13 at 12:45
Sorry! Still its not working. the problem is I do not have any input boxes inside my `
` tag. Refer my html so that you might get some clue.

LGAP

Jan 29 '13 at 13:03

@LGAP sorry I was really not getting your point earlier.I understood that jstree does not actually give u the checkboxes :). check this [link](http://stackoverflow.com/questions/8487305/jstree-disable-checkbox) relative to our topic, also they have mentioned about the types plugin. have a look at this fiddle [link](http://jsfiddle.net/radek/4fTDq/13/) – Mehavel Jan 29 '13 at 14:10

@LGAP the "rel" attribute in the 'li' element need to be set as 'disabled'.I have tried this and its working. eg '

'. This attribute produces the desired result. I am updating my answer too. finally the solution is in place :)

– Mehavel Jan 30 '13 at 10:11

Cris · Answer 2 · 2013-01-23T05:15:51.917

-1

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");

}

edited Jan 23 '13 at 05:15

answered Jan 23 '13 at 04:58

Cris

12,799
5
35
50

can you give me the exact line that would work on seeing my code. I am not aware of jquery. – LGAP Jan 23 '13 at 04:59
which type of elements you want to disable? i.e input,select etc – Cris Jan 23 '13 at 05:03
1

@Cris glad that you are not aware of jquery :) – Mehavel Jan 23 '13 at 05:17

Disable tag contents using javascript

2 Answers2

Disable
tag contents using javascript