how to disable DIV element and everything inside
I need to disable a DIV and all it's content using Javascript. I can swear that doing a simple
<div disabled="true">
was working for me before, but for some reason it no longer works. I don't understand why.
In IE10: the text "Click Me" is not greyed out and click handler still works.
I actually need this working for IE10. Below is my code.
<html>
<script>
function disableTest(){
document.getElementById("test").disabled = true;
var nodes = document.getElementById("test").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
nodes[i].disabled = true;
}
}
</script>
<body onload="disableTest();">
<div id="test">
<div onclick="alert('hello');">
Click Me
</div>
</div>
</body>
</html>
Answer
The following css statement disables click events
pointer-events:none;