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

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;
}

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

the simpleset solution

look at my selector

$myForm.find('#fieldsetUserInfo input:disabled').prop("disabled", false);

the fieldsetUserInfo is div contains all inputs I want to disabled or Enable

hope this helps you

Answer 6

$("#yourdivid textarea, #yourdivid input, #yourdivid select").attr('disabled',true);