title: Enable and disable text field if either checkbox is checked
body: <p>I have a form with 2 checkboxes and 2 sections of input text fields that are disabled.</p>
  
  <p>If only the first checkbox is checked the following input text field should be enabled:</p>
  
  <ul>
  <li>Email</li>
  <li>Confirm Email</li>
  <li>Full Name</li>
  </ul>
  
  <p>If only the second checkbox is checked the following input text fields should be enabled:</p>
  
  <ul>
  <li>Email</li>
  <li>Confirm Email</li>
  <li>Color</li>
  <li>Size</li>
  <li>Model</li>
  </ul>
  
  <p>If both checkboxes are checked than all the input text fields should be enabled.  The problem I have is that if both checkboxes are checked, then one is unchecked the 2 email text fields become disabled.  </p>
  
  <p>Here is a fiddle to what I have.  I can use jQuery.  <a href="http://jsfiddle.net/Ujxkq/" rel="noreferrer">http://jsfiddle.net/Ujxkq/</a></p>
  
  <p>Here is my HTML:</p>
  
  <pre><code>&lt;form id="myForm"&gt;
    &lt;h3&gt;Section 1&lt;/h3&gt;
    Checkbox 1: &lt;input type="checkbox" name="checkbox1" id="checkboxOne" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection1(this.checked, 'fullName');" /&gt;
    &lt;p&gt;&lt;input type="text" id="emailAddr" name="myEmailAddr" placeholder="Email" disabled /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type="text" id="emailConfirm" name="myEmailConfirm" placeholder="Confirm Email" disabled /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type="text" id="fullName" name="myFullName" placeholder="Full Name" disabled /&gt;&lt;/p&gt;
  
    &lt;h3&gt;Section 2&lt;/h3&gt;
    Checkbox 2: &lt;input type="checkbox" name="checkbox2" id="checkboxTwo" onclick="enableDisableEmail(this.checked, 'emailAddr', 'emailConfirm');enableDisableSection2(this.checked, 'color', 'size', 'model');" /&gt;
    &lt;p&gt;&lt;input type="text" id="color" name="myColor" placeholder="Color" disabled /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type="text" id="size" name="mySize" placeholder="Size" disabled /&gt;&lt;/p&gt;
    &lt;p&gt;&lt;input type="text" id="model" name="myModel" placeholder="Model" disabled /&gt;&lt;/p&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Here is my Javascript:</p>
  
  <pre><code>function enableDisableEmail(isEnabled, email, confirm) {
      document.getElementById(email).disabled = !isEnabled;
      document.getElementById(confirm).disabled = !isEnabled;
  }
  
  function enableDisableSection1(isEnabled, fullName) {
      document.getElementById(fullName).disabled = !isEnabled;
  }
  
  function enableDisableSection2(isEnabled, color, size, model) {
      document.getElementById(color).disabled = !isEnabled;
      document.getElementById(size).disabled = !isEnabled;
      document.getElementById(model).disabled = !isEnabled;
  }
  </code></pre>