4umi.com/web/javascript/tableable

Table ability

Table Javascript

At times, form elements must be disabled or enabled collectively. Rather than looping all <input> elements, it is possible to disable the form itself. This will affect any and all contained control elements and links. Straight forward as this may sound, the rub is that some browsers are more cooperative than others.

An able table

Below is a silly, little table, wrapped in <form> tags. Use the checkboxes to toggle which are elements are to be disabled. It will be evident that individual elements cannot be operative when the containing form is itself disabled. Click the buttons to investigate how their states are reported to the script and onscreen.


The table form

The code

The HTML shows two forms. The first contains the controls with which to manipulate the second form.

<form action="/"><div>
<label for="boxa">
<input type="checkbox" id="boxa" checked="checked" onclick="document.forms.f.disabled=!this.checked">
Enable the table
</label>
<br/>
<label for="boxb">
<input type="checkbox" id="boxb" checked="checked" onclick="document.forms.f.elements[0].disabled=!this.checked">
Enable button 1
</label>
</div></form>

<form action="/" id="f">
<table style="margin:2em;"><caption>The table form</caption><tr>
<td><input type="button" class="key" value="Button 1" onclick="window.alert( 'Button 1 is ' + (this.disabled?'dis':'en') + 'abled.' );"/></td>
<td><input type="button" class="key" value="Button 2" onclick="window.alert( 'Button 2 is ' + (this.disabled?'dis':'en') + 'abled.' );"/></td>
</tr><tr>
<td><input type="button" class="key" value="Button 3"/></td>
<td><input type="button" class="key" value="Button 4"/></td>
</tr></table>
</form>