Best IT Recipes

How to disable the div element and everything inside

I need to disable DIV and all content using Javascript. I can swear that simple

<div disabled="true">

worked for me before, but for some reason it no longer works. I do not understand why.

In IE10, the text “Click Me” is not grayed out and the click handler still works.

I really need this job for IE10. Below is my code. Thanks in advance.

 <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>
+82
javascript jquery html css
Mar 21 '13 at 18:26
source share
6 answers

Try it!

 $("#test *").attr("disabled", "disabled").off('click');

I do not see that you are using jquery above, but you specified it as a tag.

+38
Mar 21 '13 at 18:33
source share

The following css statement disables click events

 pointer-events:none;
+192
Mar 21 '13 at 19:23
source share

I think embedded scripts are hard to stop, you can try instead:

 <div id="test"> <div>Click Me</div> </div>

and script:

 $(function () { $('#test').children().click(function(){ alert('hello'); }); $('#test').children().off('click'); });

CHEKOUT FIDDLE AND SEE HELP

More on .off ()

+8
Mar 21 '13 at 18:36
source share

I have no experience with this, but it seems that BlockUI is what you are looking for. Give it a try.

+3
Mar 21 '13 at 18:32
source share

pure javascript no jQuery

 <script type="text/javascript"> function sah() { sah1(document.getElementById("div1")); } function sah1(el) { try { el.disabled = el.disabled ? false : true; } catch (E) {} if (el.childNodes && el.childNodes.length > 0) { for (var x = 0; x < el.childNodes.length; x++) { sah1(el.childNodes[x]); } } } </script> <body> <div id="div1"> <input type="text" value="SAH Computer" /> <br /> <input type="button" value="SAH Computer" /> <br /> <input type="radio" name="sex" value="Male" />Male <Br /> <input type="radio" name="sex" value="Female" />Female <Br /> </div> <Br /> <Br /> <input type="button" value="Click" onclick="sah()" /> </body>
+1
Jul 22 '13 at 14:39
source share

You cannot use "disable" to disable the click event. I do not know how or if it worked in IE6-9, but it did not work in Chrome, and it should not work on IE10.

You can disable the onclick event by adding an event that cancels:

 ;(function () { function cancel () { return false; }; document.getElementById("test").disabled = true; var nodes = document.getElementById("test").getElementsByTagName('*'); console.log(nodes); for (var i = 0; i < nodes.length; i++) { nodes[i].setAttribute('disabled', true); nodes[i].onclick = cancel; } }());

In addition, the installation is “disabled” on the node directly does not necessarily add the attribute - using setAttribute does.

http://jsfiddle.net/2fPZu/

0
Mar 21 '13 at 18:38
source share


More articles:


All Articles