Enable or disable DIV tag and its inner controls using Javascript

Posted: September 3, 2008 in Javascript
Tags: , , ,

Today, I was searching for a solution to enable/disable DIV element using javascript. I have tried so many code, but all are working in IE only and not supported by FF (firefox). At last I found some solution which is helpful. I thought this might also useful to you.

Copy/Paste following javascript code snippet.
<script type="text/javascript">
function toggleAlert() {
toggleDisabled(document.getElementById("content"));
}
function toggleDisabled(el) {
try {
el.disabled = el.disabled ? false : true;
}
catch(E){
}
if (el.childNodes && el.childNodes.length > 0) {
for (var x = 0; x < el.childNodes.length; x++) {
toggleDisabled(el.childNodes[x]);
}
}
}
</script>

Copy/Paste following HTML code in BODY tag:

<div id="content">
<table>
<tr>
<td><input type="text" name="foo" /></td>
</tr>
<tr>
<td>
<select name="bar">
<option>a</option>
<option>b</option>
<option>c</option>
</select>
</td>
</tr>
</table>
</div>
<input type="checkbox" value="toggleAlert()" onclick="toggleAlert()" />

Here, I have used one checkbox, by clicking which you can enable/disable child controls of a DIV. However, you can use any element other than checkbox (e.g button, radio button, etc…)

Advertisements
Comments
  1. Leo says:

    I think that instead of doing this:
    el.disabled = el.disabled ? false : true;

    you could just do this:
    el.disabled = !el.disabled;

  2. cwxwwwxdfvwwxwx says:

    well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch 😉

  3. renuka says:

    still not working in mozilla ??

  4. Tushar says:

    It was really helpful for me. Thank you vey much

  5. clemie says:

    still not working in firefox

  6. hspinfo says:

    This code is tested under FireFox 3.5.2 and IE 8.0 and in both browser it is working properly.

  7. Sankar says:

    Its working in all browsers.Its working fine with form, input, button elements. But text inside div elements are not disabled.

    • hspinfo says:

      Sankar,

      why do you want to disable the text inside div? I think the text is already not editable, or are you talking about the text inside textbox?

      • Sankar says:

        I have a customized rounded corner button. I am not using any form elements in div.

        Check out the below code

        SAVE

        How can i grey out this button class ?

      • Sankar says:

        I have a customized rounded corner button. I am not using any form elements in div.

        Check out the below code

        div class=”roundedbutton” onMouseOver=”this.className=’roundedbutton_hover'” onMouseOut=”this.className=’roundedbutton'”

        b class=”rb1″ /b
        div class=”rboxcontent”
        SAVE
        div
        b class=”rb1b” /b
        /div

        How can i grey out this button class ?

      • jkurrle says:

        Textbox label is grayed out, but I can still add text to the input box, itself.

  8. Dev says:

    Thanks. this works very well.
    But……….

    The links are still clickable…………..
    rest of the controls are disabled in the content.

    Can you please check ?

  9. DanielTan says:

    Worked superb very well!.
    Thanks alot

  10. Blicko says:

    That little chunk of javascript saved me a ton of time, and it works like a charm. Thanks a million!!

  11. Vishal says:

    Good stuff man!!! Its working.. Thanxs

  12. a says:

    thanx a lot

  13. vinodh says:

    the inner div is also getting disabled need a solution to enable inner div and disable parent div

  14. Jitesh says:

    Thanks a lot

  15. stianlik says:

    Handy function, I simplified it.

    function toggleDisabled(el) {
    el.disabled = !el.disabled;
    for (var i = 0; i < el.childNodes.length; i++)
    toggleDisabled(el.childNodes[i]);
    }

    Use onclick="toggleDisabled(this.form)" to disable a form,
    or toggleDisabled(document.getElementById('content') to disable the content-element.

  16. shrava dixit says:

    MCK

  17. Martin says:

    Works like a charm, saved me, period! Thanks!

  18. wintermute says:

    Thanks for the snippet, it works flawlessly 🙂

  19. thanks mate I am looking for disaBLE div control on checkbox

    thanks

  20. Karthick A Rao says:

    I have a situation wherein I need to disable the anchor tag inside the div, the code snippet is as follows,

    There are two button like and dislike which is a anchor calling the respective function, once this buttons are pressed I need to disable both the button.

  21. Kyle says:

    Thanks for the post – how would this work in the same way except checking the box to ENABLE the functionality wherein the div content is turned off on load and checking the box enables it

  22. Sam says:

    Excelent but doesnt work on img and links =(

  23. anandhi says:

    I have created 2 tabs in html in which i want to enable/disable but both should be in simultaneous process….can u help me in this

  24. satya says:

    links are still enabled in firefox

  25. Mohamed Rafiq S says:

    Gud one! It workz for me! ThankzZ a lot!

  26. alpesh says:

    It works for me… 😉

  27. Vinzy says:

    Thanks a lot..

  28. Sanjeet says:

    It isn’t working in firefox.

  29. vijis says:

    Thanks man

  30. Niranjan says:

    its not working..

  31. Nishar says:

    Its not working Fire Fox

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s