80

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;
Zakaria Acharki
  • 66,747
  • 15
  • 75
  • 101
Emax
  • 1,007
  • 2
  • 13
  • 16
  • 3
    What is the difference between an "enabled" and "disabled" `div` element? It is really just `input` elements that can be disabled. Or do you want to disable all child `input` elements within a `div`? – James Allardice Dec 07 '11 at 22:57
  • I want to disable every divs that are under main one – Emax Dec 08 '11 at 22:22
  • Please visit: http://stackoverflow.com/questions/639815/how-to-disable-all-div-content/14973111#14973111 – Syed Nasir Abbas Feb 20 '13 at 05:53

3 Answers3

185

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;
}
Yusuf K.
  • 4,195
  • 1
  • 33
  • 69
Rion Williams
  • 74,820
  • 37
  • 200
  • 327
  • 5
    `.prop('disabled', true)` would be better. And your last code block leaks a global (you need `var i`). – ThiefMaster Dec 07 '11 at 23:19
  • @ThiefMaster - Thanks :) The post has been updated to fix the global variable issue, and now address both .attr() and .prop() solutions. – Rion Williams Dec 07 '11 at 23:22
  • Thanks for very nice answer, Which one do you think is better and faster? shall I use JavaScript or Jquery !? – Emax Dec 08 '11 at 20:56
  • 1
    If you are already using JQuery - then I recommend using it. However, if you aren't the Javascript solution will be much easier to implement. As you will just have to wrap those in a – Rion Williams Dec 08 '11 at 20:59
  • 'code'' – Emax Dec 08 '11 at 22:24
  • If you want to use just the javascript suggestion you will need the following : – Rion Williams Dec 08 '11 at 22:51
  • well I check the Jquery on and It doesnt work ?! Shall I bind it to load page or ? this is my code shape :$("#dcalc").children(this).attr(disabled,"disabled"); $("#dcalc").attr('disabled',true);
    – Emax Dec 08 '11 at 23:01
  • by id="1" i meant dcalc . I checked the JS but it was not working too ??? can you tell me what exactly it should be shaped ? – Emax Dec 08 '11 at 23:16
  • how to bind the changes to the Div ?! – Emax Dec 08 '11 at 23:27
  • 14
    It doesn't work. I still can click the children links. – emeraldhieu Jan 09 '14 at 09:22
  • 6
    Me too, it doesn't work. I still can click the children links – Olivier Pons Feb 28 '14 at 13:13
  • 7
    NOTE that `$el.children()` only traverses a single level down the DOM, so it will NOT in fact disable ALL descendants of the DIV. So, @Emerald214 @oliver-pons, to accomplish this, you'd have to do something like `$("#dcac1 *").prop("disabled", true);` Otherwise, great answer. – Todd Oct 28 '14 at 22:32
  • What does `disabled=true` mean on a `div` in the DOM? What does it change? I've found a bug where a div has a KnockoutJs `enable` binding and once disabled, it seems to never re-enable. Trying to understand why disabling a div is even a thing. – xr280xr Feb 20 '21 at 05:10
56

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>');
Sergio Ramirez
  • 680
  • 5
  • 7
  • 3
    Combine it with suppressing keyboard and copy/paste events: `var stopPropFn = function (e) { e.stopPropagation(); e.preventDefault(); }; $('#DisableDiv').bind("keydown", stopPropFn); $('#DisableDiv').bind("keypress", stopPropFn); $('#DisableDiv').bind("paste", stopPropFn);` – Martin Ždila Jul 23 '13 at 18:22
  • 1
    This doesn't prevent the user going to the links or inputs with the "tab" key where they can still interact with them. – Engin Yapici Dec 25 '13 at 17:31
  • 2
    You should give the masking division an ID so you can delete it when you want to re-enable the division – bobbdelsol Oct 31 '14 at 00:27
  • 1
    How do you undo it ? I want this to be like a toggle. – Oliver Sep 11 '18 at 11:07
  • @oliver give the div thats being appended an id such as "overlay". Then when you want to remove simply use $("#overlay").remove(); – Jake Feb 07 '19 at 02:26
23

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.

nnnnnn
  • 147,572
  • 30
  • 200
  • 241
  • I want to have it on page load ? can it be jquery ? – Emax Dec 08 '11 at 22:27
  • The last block of code in my answer does it on page load (well, on document ready which is a better choice for this) and it does it with jQuery - isn't that what you want? – nnnnnn Dec 08 '11 at 23:53
  • It is not working ? http://stackoverflow.com/questions/8468761/disable-div-on-load-is-not-working-why/8468858#8468858 – Emax Dec 12 '11 at 12:43
  • Interesting... your answer does work while using `children()` won't work: http://stackoverflow.com/a/8423836/114029 Why? I do see in Chrome Dev Tools that it correctly selects the children elements but they won't be disabled at all. – Leniel Maccaferri Sep 09 '14 at 03:59
  • @LenielMacaferi - I don't know without seeing your html or perhaps a demo if you create one at jsfiddle.net. But in a general sense `.children()` only selects immediate children, which is why my answer uses `.find()` to get all matching descendent elements. You need to select form elements, it doesn't really make sense to disable divs. – nnnnnn Sep 09 '14 at 08:08
  • Nice work thank you – OJB1 Aug 26 '21 at 21:47