how to disable DIV element and everything inside

Question

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>

I'm just trying to disable everything inside a DIV and it's handlers. — Marquinio, Mar 21 '13 at 18:28
`"true"` is not a valid value for the `disabled`-attribute (in the markup) — Bergi, Mar 21 '13 at 18:34
Actually in Quirks-mode IE can disable a `div`, but it only grays button texts, it doesn't prevent events firing. — Teemu, Mar 21 '13 at 18:36
and advice, use `data-dissabled` for this kind of stuff in elements that are not forms — Tomas Ramirez Sarduy, Mar 21 '13 at 18:44
You can define custom attributes in xHTML and achieve disable with CSS: https://stackoverflow.com/questions/639815/how-to-disable-all-div-content/65563261#65563261 — Major, Jan 04 '21 at 13:13

score 456 · Answer 1 · answered Mar 21 '13 at 19:23

456

The following css statement disables click events

pointer-events:none;

answered Mar 21 '13 at 19:23

bukka

4,973
3
19
21

5

Really good one, but there are some that today doesn't suport it: http://caniuse.com/pointer-events – thatsIT Jan 23 '14 at 15:48
This one is really good for select2 disabling as the built-in feture for that doesn't really work. – user164863 Mar 26 '14 at 09:07
37

+10, StackOverflow never lets me down. Nevermind about the obsolete IE users, I warn them to upgrade their browser always. – andreszs Sep 23 '14 at 23:28
Lol I wish the real world was as simple as "Nevermind about the obsolete IE users". Sadly I still have to support IE10 since public service department are slow at updating *Sigh* So I can't use what would have been perfect: pointer-events :'-( – Gertsen May 18 '16 at 08:09
14

Unfortunately you can still navigate in between elements with Tab key (and once you navigated to an element, you can edit it as well). – interrupt Mar 25 '17 at 17:46
4

The standard `disabled` attribute on form fields addresses all forms of input, not just the mouse. This only addresses disabling mouse input. – Roy Tinker May 30 '17 at 19:37
1

As @RoyTinker said, this does not affect form elements. With whatever logic you're adding the `pointer-events: none` to your div, also have all form elements within that "disabled"-looking div to have the `disabled=true` attribute as well. – Andrew E Dec 12 '18 at 22:01
@AndrewE note the `disabled` attribute doesn't have to have a value in HTML 4-5 (i.e. `` is fine). However, if your document is XHTML (or you're using a library that requires a value), the correct value to use is `disabled` (i.e. ``). – Roy Tinker Dec 14 '18 at 01:11

Danwilliger · Accepted Answer · 2013-03-21T18:40:44.867

66

Try this!

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

I don't see you using jquery above, but you have it listed as a tag.

edited Mar 21 '13 at 18:40

answered Mar 21 '13 at 18:33

Danwilliger

1,221
10
7

33

`disabled` isn't a valid property for `div`. – James Donnelly Mar 21 '13 at 18:34
17

`.prop("disabled", true)` would be better (if it would work at all) – Bergi Mar 21 '13 at 18:36
This sets all the children of the div to disabled. So if he/she has inputs or radio buttons, it will disable them. Getting more specific with the selectors is highly recommended. – Danwilliger Mar 21 '13 at 18:36
I tried both .attr("disabled", "disabled") and .prop("disabled", true) but they only disable the onclick handler. The text is NOT greyed out. – Marquinio Mar 21 '13 at 18:42
9

Ah, you should specify that in your original post. Make a `.disabled` class in your css that sets `color: grey;` and maybe `background-color: rgb(0, 0, 0, .2);` and add the class `$("#test").addClass("disabled");` – Danwilliger Mar 21 '13 at 18:45
yeah this is part of bigger webapp using jQuery, just wanted to make problem simple. Thanks this works for me. I'm sure this was working in IE9, but just got new IE10 update. – Marquinio Mar 21 '13 at 19:23
@Danwilliger ;its is working...but what to do if I again want to enable it.,.? – Hardik Bhalani Sep 24 '13 at 11:06
@Hardik, Try: $("#test").prop("disabled", false); or $("#test").removeAttr("disabled"); – Max Strater May 10 '14 at 21:53
2

@MaxStrater It won't switch the old click bindings on – Samy S.Rathore May 27 '14 at 13:29
It the most unefficient way to do this... What if page has many elements? Better way to go is: `$('#test').find('*')` or better specify `input` instead of `*` – instead Jan 20 '16 at 15:01
1

and how to enable again? – zypro Oct 10 '16 at 14:08
`for (let x of temp0.querySelectorAll('*')) { x.disabled = true; }` – Andrew Sep 14 '20 at 20:17
To enable: $("#test *").attr("disabled", false).off('click'); – sonicbabbler Jan 25 '21 at 20:30

score 17 · Answer 3 · edited Jul 08 '23 at 05:32

17

javascript and jQuery

function sah() {
        $("#div2").attr("disabled", "disabled").off('click');
        var x1=$("#div2").hasClass("disabledDiv");
        
        (x1==true)?$("#div2").removeClass("disabledDiv"):$("#div2").addClass("disabledDiv");
  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]);
            }
        }
    }

#div2{
  padding:5px 10px;
  background-color:#777;
  width:150px;
  margin-bottom:20px;
}
.disabledDiv {
    pointer-events: none;
    opacity: 0.4;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
<div id="div1">
        <div id="div2" onclick="alert('Hello')">Click me</div>
        <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()" />

edited Jul 08 '23 at 05:32

SwissCoder

2,514
4
28
40

answered Jul 22 '13 at 14:39

Nikhil sHETH

510
4
11

4

'disabled' doesn't work on divs – Mandeep Jain Jan 17 '18 at 10:51
Working fine for me in Chrome, Mozilla and IE. just checked. Will you copy paste above example and check it? – Nikhil sHETH Jan 17 '18 at 14:07
@MandeepJain, for your convenience I add code to snippet. Run above snippet. – Nikhil sHETH Jan 17 '18 at 14:14
Thanks for replying on this old post. But, only form and form elements can be disabled. Your code disables all the input elements but not the div itself. – Mandeep Jain Jan 17 '18 at 15:33
@MandeepJain I think you want to disabled div click event right? check above code. Now whole div is disabled as per your requirement. Just update me its working for you or not. – Nikhil sHETH Jan 18 '18 at 07:11
1

Yes. But your original answer said pure javascript no jquery which was my requirement. Its ok. Thanks for the efforts. I have found another solution :) – Mandeep Jain Jan 18 '18 at 07:42

score 10 · Answer 4 · answered Mar 21 '13 at 18:36

I think inline scripts are hard to stop instead you can try with this:

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

and script:

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

how to disable DIV element and everything inside

5 Answers5

CHEKOUT FIDDLE AND SEE IT HELPS

Linked