How to Disable Div Element and Everything Inside

how to disable DIV element and everything inside

Try this!

$("#test *").attr("disabled", "disabled").off('click');

I don't see you using jquery above, but you have it listed as a tag.

How to disable all div content

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

disable all form elements inside div

Try using the :input selector, along with a parent selector:

$("#parent-selector :input").attr("disabled", true);

Enable & Disable a Div and its elements in Javascript

You should be able to set these via the attr() or prop() functions in jQuery as shown below:

jQuery (< 1.7):

// This will disable just the div
$("#dcacl").attr('disabled','disabled');

or

// This will disable everything contained in the div
$("#dcacl").children().attr("disabled","disabled");

jQuery (>= 1.7):

// This will disable just the div
$("#dcacl").prop('disabled',true);

or

// This will disable everything contained in the div
$("#dcacl").children().prop('disabled',true);

or

//  disable ALL descendants of the DIV
$("#dcacl *").prop('disabled',true);

Javascript:

// This will disable just the div
document.getElementById("dcalc").disabled = true;

or

// This will disable all the children of the div
var nodes = document.getElementById("dcalc").getElementsByTagName('*');
for(var i = 0; i < nodes.length; i++){
     nodes[i].disabled = true;
}

How to disable the div tag in angular 2

You can add the attribute like

<div [attr.disabled]="isDisabled ? true : null">

but <div> doesn't support the disabled attribute.

Perhaps this is what you want

<div (click)="isDisabled ? $event.stopPropagation() : myClickHandler($event); isDisabled ? false : null"
   [class.isDisabled]="isDisabled"></div>

with some custom CSS that makes .isDiabled look disabled.

It might be better to create a method to put the code there instead of inline.

---

Related Topics