title: Using depends with the jQuery Validation plugin
body: <p>I've got a form with a bunch of textboxes that are disabled by default, then enabled by use of a checkbox next to each one.</p>
  
  <p>When enabled, the values in these textboxes are required to be a valid number, but when disabled they don't need a value (obviously).  I'm using the jQuery Validation plugin to do this validation, but it doesn't seem to be doing what I expect.</p>
  
  <p>When I click the checkbox and disable the textbox, I still get the invalid field error despite the <code>depends</code> clause I've added to the rules (see code below).  Oddly, what actually happens is that the error message shows for a split second then goes away.</p>
  
  <p>Here is a sample of the list of checkboxes &amp; textboxes:</p>
  
  <pre><code>&lt;ul id="ItemList"&gt;
  &lt;li&gt;
      &lt;label for="OneSelected"&gt;One&lt;/label&gt;&lt;input id="OneSelected" name="OneSelected" type="checkbox" value="true" /&gt;
      &lt;input name="OneSelected" type="hidden" value="false" /&gt;
      &lt;input disabled="disabled" id="OneValue" name="OneValue" type="text" /&gt;
  &lt;/li&gt;
  &lt;li&gt;
      &lt;label for="TwoSelected"&gt;Two&lt;/label&gt;&lt;input id="TwoSelected" name="TwoSelected" type="checkbox" value="true" /&gt;
      &lt;input name="TwoSelected" type="hidden" value="false" /&gt;
      &lt;input disabled="disabled" id="TwoValue" name="TwoValue" type="text" /&gt;
  &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>And here is the jQuery code I'm using</p>
  
  <pre><code>//Wire up the click event on the checkbox
  jQuery('#ItemList :checkbox').click(function(event) {
      var textBox = jQuery(this).siblings(':text');
      textBox.valid();
      if (!jQuery(this).attr("checked")) {
          textBox.attr('disabled', 'disabled');
          textBox.val('');
      } else {
          textBox.removeAttr('disabled');
          textBox[0].focus();
      }
  });
  
  //Add the rules to each textbox
  jQuery('#ItemList :text').each(function(e) {
      jQuery(this).rules('add', {
          required: {
              depends: function(element) {
                  return jQuery(element).siblings(':checkbox').attr('checked');
              }
          },
          number: {
              depends: function(element) {
                  return jQuery(element).siblings(':checkbox').attr('checked');
              }
          }
      });
  });
  </code></pre>
  
  <p>Ignore the hidden field in each <code>li</code> it's there because I'm using asp.net MVC's <code>Html.Checkbox</code> method.</p>