Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to disable all div content

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)

like image 980
juan Avatar asked Mar 12 '09 18:03

juan


People also ask

How do I turn off everything in a div?

To disable div element and everything inside with CSS, we set the pointer-events CSS property of the div to none . to disable pointer events on the div with pointer-events set to none with CSS.

Is it possible to disable a div?

Nope! Divs can't be disabled. Only form and form elems. Actually in Quirks-mode IE can disable a div , but it only grays button texts, it doesn't prevent events firing.

Can we disable div in angular?

Div element cannot be disabled like form controls. You can disable form controls in div instead.

How do I turn off everything in HTML?

With HTML5 it's possible to disable all inputs contained using the <fieldset disabled /> attribute. If this Boolean attribute is set, the form controls that are its descendants, except descendants of its first optional element, are disabled, i.e., not editable.


2 Answers

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

Supplement:

Many commented like these: "This will only disallow mouse events, but the control is still enabled" and "you can still navigate by keyboard". You Could add this code to your script and inputs can't be reached in other ways like keyboard tab. You could change this code to fit your needs.

$([Parent Container]).find('input').each(function () {      $(this).attr('disabled', 'disabled');  }); 
like image 190
Kokodoko Avatar answered Sep 28 '22 12:09

Kokodoko


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.

like image 36
Martin K. Avatar answered Sep 28 '22 11:09

Martin K.