title: JavaScript: disable <button> until value is selected
body: <p>I'm trying to implement a javascript code for the html5 form that will responsible for disabling/enabling the button until the select element is not selected. Here is the codes:</p>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form name="courseForm" id="courseForm"&gt;
      &lt;select name="coursetype" id="coursetype" onchange="enableStartBtn()"&gt;
          &lt;option value="0" selected="selected"&gt;Select here...&lt;/option&gt;
          &lt;option value="1"&gt;CourseName 1&lt;/option&gt;
          &lt;option value="2"&gt;CourseName 2&lt;/option&gt;
          &lt;option value="3"&gt;CourseName 3&lt;/option&gt;
      &lt;/select&gt;
  &lt;button type="button" id="startBtn" disabled="disabled" onclick="Test()"&gt;Start&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>and <strong>JavaScript</strong>:</p>
  
  <pre><code>function enableStartBtn() {
      $('#startBtn').removeAttr('disabled');
  }
  
  function Test() {
      var form = $('#courseForm');
      var course = $('#coursetype', form).val();
      if (course == '0') {
          alert('Select the course first!');
      } else if (course == '1') {
          alert('CourseName 1 is selected!');
      } else if (course == '2') {
          alert('CourseName 2 is selected!');
      } else if (course == '3') {
          alert('This course is not implemented yet');
      }
  }
  </code></pre>
  
  <p>I'm using <strong>JQuery 1.9.1</strong> in my code, everything looks like ok, but the when value is selected the button is not enables. Any help would be appreciated.</p>
  
  <p><strong>UPDATE</strong>: Sorry guys forgot to mention that I'm also using <strong>JQuery Mobile 1.3.0</strong>, so without including jquery mobile it works, but with jquery mobile not.
  Here is the jsfiddle version: <a href="http://jsfiddle.net/dozent/UVQ4m/" rel="noreferrer">http://jsfiddle.net/dozent/UVQ4m/</a></p>