How to disable all div content

How to disable all div content

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)

Solutions/Answers:

Solution 1:

Many of the above answers only work on form elements. A simple way to disable any DIV including its contents is to just disable mouse interaction. For example:

$("#mydiv").addClass("disabledbutton");

css

.disabledbutton {
    pointer-events: none;
    opacity: 0.4;
}

Solution 2:

Use a framework like JQuery to do things like:

function toggleStatus() {
    if ($('#toggleElement').is(':checked')) {
        $('#idOfTheDIV :input').attr('disabled', true);
    } else {
        $('#idOfTheDIV :input').removeAttr('disabled');
    }   
}

Disable And Enable Input Elements In A Div Block Using jQuery should help you!

As of jQuery 1.6, you should use .prop instead of .attr for disabling.

Solution 3:

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.

Related:  How can I generate an apk that can run without server with react-native?

Then you simply do:

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

Solution 4:

Here is a quick comment for people who don’t need a div but just a blockelement. In HTML5 <fieldset disabled="disabled"></fieldset> got the disabled attribute. Every form element in a disabled fieldset is disabled.

Solution 5:

The disabled attribute is not part of the W3C spec for DIV elements, only for form elements.

The jQuery approach suggested by Martin is the only foolproof way you’re going to accomplish this.

Solution 6:

similar to cletu’s solution, but i got an error using that solution, this is the workaround:

$('div *').prop('disabled',true);
// or
$('#the_div_id *').prop('disabled',true);

works fine on me