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

One way to achieve this is by adding the disabled prop to all children of the div. You can achieve this very easily:

$("#myDiv").find("*").prop('disabled', true);

$("#myDiv") finds the div, .find("*") gets you all child nodes in all levels and .prop('disabled', true) disables each one.

This way all content is disabled and you can't click them, tab to them, scroll them, etc. Also, you don't need to add any css classes.

Answer 2

This css only/noscript solution adds an overlay above a fieldset (or a div or any other element), preventing interaction:

fieldset { position: relative; }
fieldset[disabled]::after { content: ''; display: inline-block; position: absolute; top: 0; left: 0; right: 0; bottom: 0; pointer-events: all; background: rgba(128,128,128,0.2); }

If you want an invisible i.e. transparent overlay, set the background to e.g. rgba(128,128,128,0), as it won't work without a background. The above works for IE9+. The following much simpler css will work on IE11+

[disabled] { pointer-events: none; }

Chrome

Answer 3

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 4

Browsers tested: IE 9, Chrome, Firefox and jquery-1.7.1.min.js

    $(document).ready(function () {
        $('#chkDisableEnableElements').change(function () {
            if ($('#chkDisableEnableElements').is(':checked')) {
                enableElements($('#divDifferentElements').children());
            }
            else {
                disableElements($('#divDifferentElements').children());
            }
        });
    });

    function disableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = true;

            disableElements(el[i].children);
        }
    }

    function enableElements(el) {
        for (var i = 0; i < el.length; i++) {
            el[i].disabled = false;

            enableElements(el[i].children);
        }
    }

Answer 5

If you are simply trying to stop people clicking and are not horrifically worried about security - I have found an absolute placed div with a z-index of 99999 sorts it fine. You can't click or access any of the content because the div is placed over it. Might be a bit simpler and is a CSS only solution until you need to remove it.

Answer 6

I would use an improved version of Cletus' function:

 $.fn.disable = function() {
    return this.each(function() {          
      if (typeof this.disabled != "undefined") {
        $(this).data('jquery.disabled', this.disabled);

        this.disabled = true;
      }
    });
};

$.fn.enable = function() {
    return this.each(function() {
      if (typeof this.disabled != "undefined") {
        this.disabled = $(this).data('jquery.disabled');
      }
    });
};

Which stores the original 'disabled' property of the element.

$('#myDiv *').disable();