How can I enable / disable all table subcontrollers?

Question

I have a checkBox, which when it is checked, I want to turn on the table and its subcontrollers, and when it is disabled, I want to do the opposite.

I already realized that I had to iterate over all the subControls of the table, and my question is, is there any good and general way to do this.

Thanks in advance,

oz

Answer 1

You can do this with jQuery . Say your HTML looks like this:

<input type="checkbox" onclick="toggleControls(this)"/>Controls Disabled <table id="myTable"> <tr> <td>Name: <input type="text" /></td> <td>Select: <input type="radio" /></td> </tr> ..... 

The toggleControls () function to disable / enable all controls inside the table (this means that all text fields, buttons, check boxes, radio buttons and drop-down lists) look like this:

 <script> function toggleControls(e){ $('#myTable input,select,textarea').attr('disabled',e.checked); } </script> 

JQuery css selectors allow you to disable / enable single line controls. With plain old javascript, the function would look like this:

 var myTable = document.getElementById("myTable"); var controls= myTable.getElementsByTagName("input"); // Repeat the previous line for "select" and "textarea" for(i = 0; i < controls.length; i++) { control = controls[i]; control.disabled = !control.disabled; } 

Answer 2

This is much easier to do with the selector and class name using a framework, for example (using Prototype.js).

When this item is clicked, enable all items with the class "mycontrols".

 $('containerDiv').select('.mycontrols').each(function(element){element.disabled=false})