How to disable all div content

Question

I was under the assumption that if I disabled a div, all content got disabled too.

However, the content is grayed but I can still interact with it.

Is there a way to do that? (disable a div and get all content disabled also)

Answer 1

This is for the searchers,

The best I did is,

$('#myDiv *').attr("disabled", true);                   
$('#myDiv *').fadeTo('slow', .6);

Answer 2

HTML input controls can be disabled using 'disabled' attribute as you know. Once 'disabled' attribute for an input control is set, event handlers associated with such control are not invoked.

You have to simulate above behavior for HTML elements that don't support 'disabled' attribute like div, if you wish.

If you have a div, and you want to support click or a key event on that div, then you have to do two things: 1) When you want to disable the div, set its disabled attribute as usual (just to comply with the convention) 2) In your div's click and/or key handlers, check if disabled attribute is set on the div. If it is, then just disregard the click or key event (e.g. just return immediately). If disabled attribute is not set, then do your div's click and/or key event logic.

Above steps are browser independent as well.

Answer 3

function disableItems(divSelector){
    var disableInputs = $(divSelector).find(":input").not("[disabled]");
    disableInputs.attr("data-reenable", true);
    disableInputs.attr("disabled", true);
}

function reEnableItems(divSelector){
    var reenableInputs = $(divSelector).find("[data-reenable]");
    reenableInputs.removeAttr("disabled");
    reenableInputs.removeAttr("data-reenable");
}

Answer 4

You can use this simple CSS statement to disable events

#my-div {
    pointer-events:none;
}

Answer 5

As mentioned in comments, you are still able to access element by navigating between elements by using tab key. so I recommend this :

$("#mydiv")
  .css({"pointer-events" : "none" , "opacity" :  "0.4"})
  .attr("tabindex" , "-1");

Answer 6

I just wanted to mention this extension method for enabling and disabling elements. I think it's a much cleaner way than adding and removing attributes directly.

Then you simply do:

$("div *").disable();