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…)
I think that instead of doing this:
el.disabled = el.disabled ? false : true;
you could just do this:
el.disabled = !el.disabled;
well, hi admin adn people nice forum indeed. how’s life? hope it’s introduce branch 😉
still not working in mozilla ??
It was really helpful for me. Thank you vey much
still not working in firefox
This code is tested under FireFox 3.5.2 and IE 8.0 and in both browser it is working properly.
Its working in all browsers.Its working fine with form, input, button elements. But text inside div elements are not disabled.
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?
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 ?
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 ?
Textbox label is grayed out, but I can still add text to the input box, itself.
gdfgdfg
dfgdfgdfg
Thanks. this works very well.
But……….
The links are still clickable…………..
rest of the controls are disabled in the content.
Can you please check ?
did you find a solution to disable the links as well?
Worked superb very well!.
Thanks alot
That little chunk of javascript saved me a ton of time, and it works like a charm. Thanks a million!!
Good stuff man!!! Its working.. Thanxs
thanx a lot
the inner div is also getting disabled need a solution to enable inner div and disable parent div
Thanks a lot
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.
MCK
Works like a charm, saved me, period! Thanks!
Thanks for the snippet, it works flawlessly 🙂
thanks mate I am looking for disaBLE div control on checkbox
thanks
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.
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
Excelent but doesnt work on img and links =(
This works great in IE but not in CHrome
– any ideas around this would be greatly appreciated.
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
links are still enabled in firefox
Gud one! It workz for me! ThankzZ a lot!
It works for me… 😉
Thanks a lot..
It isn’t working in firefox.
Thanks man
its not working..
Its not working Fire Fox