title: jquery .prop('disabled', true) not working
body: <p>I am attempting to toggle <code>disabled = true|false</code> on a <code>&lt;input type="text"&gt;</code>, using a checkbox. I am able to get the value of the input, but I cannot set the input to disabled.</p>
  
  <p>my jquery/js code</p>
  
  <pre><code>&lt;script&gt;
  $(function () {
      $('.date').datepicker();
      $('body').on('change', '.housing', function () {
          if ($(this).val() == 'dorms') {
              $(this).parent().next(".dorms").show();
          } else {
              $(this).parent().siblings(".dorms").hide();
          }
      });
      $('body').on('change', '.single', function () {
          if ($(this).checked) {
              $('#echo1').text($(this).prev(".roommate").val());  // this works
              $(this).prev(".roommate").val(''); // does not empty the input
              $(this).prev(".roommate").disabled = true; // does not set to disabled
              $(this).prev(".roommate").prop('disabled', true);  // does not set to disabled
              $('#echo2').text($(this).prev(".roommate").prop('disabled')); // always says false
          } else {
              $('#echo1').text($(this).prev(".roommate").val()); // this works
              $(this).prev(".roommate").disabled = false;  // always stays false
              $('#echo2').text($(this).prev(".roommate").prop('disabled'));  // always says false
          }
      });
  });
  &lt;/script&gt;
  </code></pre>
  
  <p>my html code</p>
  
  <pre><code>&lt;div class="registration_housing particpant_0" data-sync="0"&gt;
      &lt;div&gt;
          &lt;label class="particpant_0"&gt;&lt;/label&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;Off Campus (not included)&lt;/label&gt;
          &lt;input type="radio" name="housing[0]" value="none" class="housing" /&gt;
      &lt;/div&gt;
      &lt;div&gt;
          &lt;label&gt;On Campus&lt;/label&gt;
          &lt;input type="radio" name="housing[0]" value="dorms" class="housing" /&gt;
      &lt;/div&gt;
      &lt;div class="dorms" style="display:none;"&gt;
          &lt;div&gt;
              &lt;label&gt;Checkin:&lt;/label&gt;
              &lt;input type="text" name="check_in[0]" class="date" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;Checkout:&lt;/label&gt;
              &lt;input type="text" name="check_out[0]" class="date" /&gt;
          &lt;/div&gt;
          &lt;div&gt;
              &lt;label&gt;Roommate:&lt;/label&gt;
              &lt;input type="text" name="roommate[0]" class="roommate" /&gt;
              &lt;input type="checkbox" name="roommate_single[0]" value="single" class="single" /&gt;check for singe-occupancy&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="line"&gt;
          &lt;hr size="1" /&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label id="echo1"&gt;&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;label id="echo2"&gt;&lt;/label&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>you can see this at <a href="http://jsfiddle.net/78dQE/1/">http://jsfiddle.net/78dQE/1/</a></p>
  
  <p>Any idea why I can get the value of <code>(".roommate")</code> - ie. <code>$(this).prev(".roommate").val()</code><br>
  but<br>
  <code>$(this).prev(".roommate").disabled = true;</code><br>
  OR<br>
  <code>$(this).prev(".roommate").prop('disabled', true);</code><br>
  will not set <code>(".roommate")</code> to disabled?</p>