Enable Disable a Div and its elements in Javascript

Question

I am looking for a method to Enable and Disable the                                           div id  dcalc  and Its children    lt div id  dcalc  class  nerkheArz   style  left  50px  top  150px  width  380px  height  370px   background   CDF  text-align  center   gt    lt div class  nerkh-Arz  gt  lt  div gt    lt div id  calc  gt   lt  div gt   lt  div gt    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

User · Accepted Answer

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

User · Answer

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   lt div style  position  absolute top 0 left 0 width  100  height 100  z-index 2 opacity 0 4 filter  alpha opacity   50   gt  lt  div gt

User · Answer

The following selects all descendant elements and disables them       dcacl   find      prop  disabled   true     But it only really makes sense to disable certain element types  inputs  buttons  etc   so you want a more specific selector       dcac1   find   input   prop  disabled  true      noting that   input  gives you the equivalent of     dcac1   find  input select textarea button   prop  disabled  true     To re-enable you just set  disabled  to false      I want to Disable them at loading the page and then by a click i can enable them   OK  so put the above code in a document ready handler  and setup an appropriate click handler     document  ready function         var  dcac1kids       dcac1   find   input         dcac1kids prop  disabled  true           not sure what you want to click on to re-enable        selector for whatever you want to click   one  click  function             dcac1kids prop  disabled  false             I ve cached the results of the selector on the assumption that you re not adding more elements to the div between the page load and the click  And I ve attached the click handler with  one   since you haven t specified a requirement to re-disable the elements so presumably the event only needs to be handled once  Of course you can change the  one   to  click   if appropriate

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

Examples related to javascript

Examples related to jquery

Examples related to xhtml