How to disable all div content

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.

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();

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.

Wrap the div within the form and fieldset tags:

<form>
  <fieldset disabled>
    <div>your controls</div>
  </fieldset>
</form>

If you wanted to keep the semantics of disabled as follows

<div disabled="disabled"> Your content here </div>

you could add the following CSS

div[disabled=disabled] {
  pointer-events: none;
  opacity: 0.4;
}

the benefit here is that you're not working with classes on the div that you want to work with

As many answers already clarified disabled is not a DIV attribute. However xHTML means Extensible HTML. It means you can define your own HTML attributes (all Frontend frameworks does that as well). And CSS supports attribute selectors which is [].

Use standard HTML with your defined attribute:

<div disabled>My disabled div</div>

Use CSS:

div[disabled] {
  opacity: 0.6;
  pointer-events: none;
}

NOTE: you can use CSS attribute selector with ID or Class names as well e.g. .myDiv[disabled] {...} Also can apply value filter e.g.: following HTML disabling standard attribute with value div[disabled=disabled] {...}.

Or just use css and a "disabled" class.
Note: don't use the disabled attribute.
No need to mess with jQuery on/off.
This is much easier and works cross browser:

.disabled{
    position: relative;
}
.disabled:after{
    content: "";
    position: absolute;
    width: 100%;
    height: inherit;
    background-color: rgba(0,0,0,0.1);
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

Then you can shut it on and off when initializing your page, or toggling a button

if(myDiv !== "can be edited"){
    $('div').removeClass('disabled');
} else{
    $('div').addClass('disabled');
}

I thought I'd chip in a couple of notes.

1. < div > can be disabled in IE8/9. I assume this is "incorrect", and it threw me off
2. Don't use .removeProp(), as it has a permanent effect on the element. Use .prop("disabled", false) instead
3. $("#myDiv").filter("input,textarea,select,button").prop("disabled", true) is more explicit and will catch some form elements you would miss with :input

Its very easy to handle if you want to disable the pointer event

document.getElementById("appliedDatepicker").style.pointerEvents = "none";

or

if you want to enable,

document.getElementById("appliedDatepicker").style.pointerEvents = "auto";

There are configurable javascript libraries that take in a html string or dom element and strip out undesired tags and attributes. These are known as html sanitizers. For example:

• DOMPurify
• Insane
• sanitize-html

E.g. In DOMPurify

DOMPurify.sanitize('<div>abc<iframe//src=jAva&Tab;script:alert(3)>def</div>'); 
// becomes <div>abcdef</div>