Enable & Disable a Div and its elements in Javascript [duplicate]

Question

I am looking for a method to Enable and Disable the div id="dcalc" and Its children.

<div id="dcalc" class="nerkheArz"  style="left: 50px; top: 150px; width: 380px; height: 370px;  background: #CDF; text-align: center" >  <div class="nerkh-Arz"></div>  <div id="calc"> </div> </div> 

I want to Disable them at loading the page and then by a click i can enable them ?

This is what i have tried

document.getElementById("dcalc").disabled = true; 

Answer 1

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

Answer 2

If you want to disable all the div's controls, you can try adding a transparent div on the div to disable, you gonna make it unclickable, also use fadeTo to create a disable appearance.

try this.

$('#DisableDiv').fadeTo('slow',.6); $('#DisableDiv').append('<div style="position: absolute;top:0;left:0;width: 100%;height:100%;z-index:2;opacity:0.4;filter: alpha(opacity = 50)"></div>');