title: Disable an element until other input fields are valid
body: <p>I am working on an HTML5 form with javascript validation. I would like to disable a select element until several input boxes contain valid data. Here's my simplified HTML:</p>
  
  <pre><code>&lt;input type="number" pattern="[0-9]{2}" min="1" max="100" id="num1" required onchange="valid(this)" /&gt;
  &lt;br /&gt;
  &lt;input type="number" pattern="[0-9]{2}" min="1" max="100" id="num2" required onchange="valid(this)" /&gt;
  &lt;br /&gt;
  &lt;input type="number" pattern="[0-9]{2}" min="1" max="100" id="num3" required onchange="valid(this)" /&gt;
  &lt;br /&gt;
  &lt;select id="drop" disabled&gt;
      &lt;option&gt;disabled until input boxes are valid&lt;/option&gt;
      &lt;option&gt;A&lt;/option&gt;
      &lt;option&gt;B&lt;/option&gt;
      &lt;option&gt;C&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>Here's the simplified javascript:</p>
  
  <pre><code>function valid(obj) {
      if ((obj.validity) &amp;&amp; (!obj.validity.valid)) {
          return false;
      } else {
          return true;
      }
  }
  
  var numA = document.getElementById("num1"),
      numB = document.getElementById("num2"),
      numC = document.getElementById("num3");
  
  if (valid(numA) &amp;&amp; valid(numB) &amp;&amp; valid(numC)) {
      document.getElementById("drop").disabled = false;
  }
  </code></pre>
  
  <p>and here's my <a href="http://jsfiddle.net/EV88V" rel="nofollow">jsfiddle</a></p>
  
  <p>Can this be accomplished with plain 'ol javascript? As I am still trying to learn Javascript, I am not yet familiar with JQuery.</p>
  
  <p>Any time the input field content changes I would like to validate the input. Then it would need to check if all other input fields (num1, num2, num3) are valid. If, and only if, all are valid it sets disabled = false on the select element.</p>
  
  <p>Is there a better way to do this?</p>