Disabling All Form Elements In Selected Div (edited)
<p>I have one large form that is separated into different sections with divs. Each section is within the same form (bigform) and I need to make sure only one section is enabled/editable at a time. And if the user changes sections after entering data into one section, all data would be cleared from the old section before disabling it. The ideal way for me is to have something like this:</p>

<pre><code>&lt;form&gt;
    &lt;select name="selector"&gt;
        &lt;option&gt;Choose Which Div To Enable&lt;/option&gt;
        &lt;option value='1'&gt;One&lt;/option&gt;
        &lt;option value='2'&gt;Two&lt;/option&gt;
        &lt;option value='3'&gt;Three&lt;/option&gt;
    &lt;/select&gt;
&lt;/form&gt;


&lt;form name="bigform"&gt;
    &lt;div id="1"&gt;
        &lt;input type="text"&gt;
        &lt;select name="foo"&gt;
            &lt;option&gt;bar&lt;/option&gt;
            &lt;option&gt;bar&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;div id="2"&gt;
        &lt;input type="text"&gt;
        &lt;select name="foo"&gt;
            &lt;option&gt;bar&lt;/option&gt;
            &lt;option&gt;bar&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;

    &lt;div id="3"&gt;
        &lt;input type="text"&gt;
        &lt;select name="foo"&gt;
            &lt;option&gt;bar&lt;/option&gt;
            &lt;option&gt;bar&lt;/option&gt;
        &lt;/select&gt;
    &lt;/div&gt;
&lt;/form&gt;
</code></pre>

<p>When the user selects option "Two" in the selector form, all form elements in DIVs 1 and 3 would be disabled. I've searched the web for hours but I cannot find a solution. What's the best method to achieve this?</p>

<p>I found this code online that does "almost" what I want but not quite. It 'toggles' the form elements in the given element (el). What I'm trying to do is sort of the opposite of this.</p>

<pre><code>    &lt;form&gt;
        &lt;select name="selector" onChange="toggleDisabled(document.getElementByID(this.value))&gt;
            &lt;option&gt;Choose Which Div To Enable&lt;/option&gt;
            &lt;option value='1'&gt;One&lt;/option&gt;
            &lt;option value='2'&gt;Two&lt;/option&gt;
            &lt;option value='3'&gt;Three&lt;/option&gt;
        &lt;/select&gt;
    &lt;/form&gt;
&lt;script&gt;
function toggleDisabled(el){
    try {
        el.disabled = el.disabled ? false : true;
    }
    catch(E){}

    if (el.childNodes &amp;&amp; el.childNodes.length &gt; 0) {
        for (var x = 0; x &lt; el.childNodes.length; x++) {
            toggleDisabled(el.childNodes[x]);
        }
    }
}
&lt;/script&gt;
</code></pre>
