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

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!

Answer 2

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.

Answer 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.

Then you simply do:

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