204

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>
Improve this question
7
  • I'm just trying to disable everything inside a DIV and it's handlers.
    – Marquinio
    Commented Mar 21, 2013 at 18:28
  • 3
    Nope! Divs can't be disabled. Only form and form elems.
    – Jai
    Commented Mar 21, 2013 at 18:28
  • 1
    "true" is not a valid value for the disabled-attribute (in the markup)
    – Bergi
    Commented Mar 21, 2013 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
    Commented Mar 21, 2013 at 18:36
  • and advice, use data-dissabled for this kind of stuff in elements that are not forms
    – Tomas Ramirez Sarduy
    Commented Mar 21, 2013 at 18:44

5 Answers 5

Reset to default
470

The following css statement disables click events

pointer-events:none;
Improve this answer
8
  • 5
    Really good one, but there are some that today doesn't suport it: caniuse.com/pointer-events
    – thatsIT
    Commented Jan 23, 2014 at 15:48
  • 40
    +10, StackOverflow never lets me down. Nevermind about the obsolete IE users, I warn them to upgrade their browser always.
    – andreszs
    Commented Sep 23, 2014 at 23:28
  • 15
    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
    Commented Mar 25, 2017 at 17:46
  • 5
    The standard disabled attribute on form fields addresses all forms of input, not just the mouse. This only addresses disabling mouse input.
    – Roy Tinker
    Commented May 30, 2017 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
    Commented Dec 12, 2018 at 22:01
67

Try this! 

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

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

Improve this answer
13
  • 33
    disabled isn't a valid property for div.
    – James Donnelly
    Commented Mar 21, 2013 at 18:34
  • 17
    .prop("disabled", true) would be better (if it would work at all)
    – Bergi
    Commented Mar 21, 2013 at 18:36
  • 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
    Commented Mar 21, 2013 at 18:45
  • 2
    @MaxStrater It won't switch the old click bindings on
    – Samy S.Rathore
    Commented May 27, 2014 at 13:29
  • 2
    and how to enable again?
    – zypro
    Commented Oct 10, 2016 at 14:08
18

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()" />

Improve this answer
6
  • 4
    'disabled' doesn't work on divs
    – Mandeep Jain
    Commented Jan 17, 2018 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
    Commented Jan 17, 2018 at 14:07
  • @MandeepJain, for your convenience I add code to snippet. Run above snippet.
    – Nikhil sHETH
    Commented Jan 17, 2018 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
    Commented Jan 17, 2018 at 15:33
  • 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
    Commented Jan 18, 2018 at 7:42
11

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');
});

CHEKOUT FIDDLE AND SEE IT HELPS

Read More about .off()

Improve this answer
0
2

You can't use "disable" to disable a click event. I don't know how or if it worked in IE6-9, but it didn't work on Chrome, and it shouldn't work on IE10 like that.

You can disable the onclick event, too, by attaching 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;
    }
}());

Furthermore, setting "disabled" on a node directly doesn't necessarily add the attribute- using setAttribute does.

http://jsfiddle.net/2fPZu/

Improve this answer

Not the answer you're looking for? Browse other questions tagged or ask your own question.