How to disable all div content

0 votes
asked Mar 12, 2009 by juan

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)

21 Answers

0 votes
answered Jan 12, 2009 by chris-van-opstal

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.

0 votes
answered Jan 12, 2009 by cletus

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();
0 votes
answered Mar 12, 2009 by martin-k

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.

0 votes
answered Jan 13, 2012 by steve11235

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
0 votes
answered Jan 15, 2012 by thecarver

Another way, in jQuery, would be to get the inner height, inner width and positioning of the containing DIV, and simply overlay another DIV, transparent, over the top the same size. This will work on all elements inside that container, instead of only the inputs.

Remember though, with JS disabled, you'll still be able to use the DIVs inputs/content. The same goes with the above answers too.

0 votes
answered Jan 27, 2012 by koosvdkolk

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();
0 votes
answered Jan 30, 2012 by sabinia

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.

0 votes
answered Jan 20, 2013 by anand
$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);
0 votes
answered Jan 20, 2013 by syed-nasir-abbas

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);
        }
    }
0 votes
answered Jan 23, 2013 by kokizzu

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

Welcome to Q&A, where you can ask questions and receive answers from other members of the community.
Website Online Counter

...