Enable/Disable DIV tag and its inner controls using Javascript

JavaScript Code:

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]);

}

}

}

Html Code:

<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()" />