title: Monitoring DOM Changes in JQuery
body: <p>Is there a way to detect when the disabled attribute of an input changes in JQuery.  I want to toggle the style based on the value.</p>
  
  <p>I can copy/paste the same enable/disable code for each change event (as I did below) but I was looking for a more generic approach.</p>
  
  <p>Can I create a custom event that will monitor the disabled attribute of specified inputs?</p>
  
  <p>Example:</p>
  
  <pre><code> &lt;style type="text/css"&gt;.disabled{ background-color:#dcdcdc; }&lt;/style&gt;
  
  
  &lt;fieldset&gt;
      &lt;legend&gt;Option 1&lt;/legend&gt;
      &lt;input type="radio" name="Group1" id="Radio1" value="Yes" /&gt;Yes
      &lt;input type="radio" name="Group1" id="Radio2" value="No" checked="checked" /&gt;No
      &lt;div id="Group1Fields" style="margin-left: 20px;"&gt;
          Percentage 1:
          &lt;input type="text" id="Percentage1" disabled="disabled" /&gt;&lt;br /&gt;
          Percentage 2:
          &lt;input type="text" id="Percentage2" disabled="disabled" /&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;fieldset&gt;
      &lt;legend&gt;Option 2&lt;/legend&gt;
      &lt;input type="radio" name="Group2" id="Radio3" value="Yes" checked="checked" /&gt;Yes
      &lt;input type="radio" name="Group2" id="Radio4" value="No" /&gt;No
      &lt;div id="Group2Fields" style="margin-left: 20px;"&gt;
          Percentage 1:
          &lt;input type="text" id="Text1" /&gt;&lt;br /&gt;
          Percentage 2:
          &lt;input type="text" id="Text2" /&gt;&lt;br /&gt;
      &lt;/div&gt;
  &lt;/fieldset&gt;
  &lt;script type="text/javascript"&gt;
      $(document).ready(function () {
  
          //apply disabled style to all disabled controls
          $("input:disabled").addClass("disabled");
  
          $("input[name='Group1']").change(function () {
              var disabled = ($(this).val() == "No") ? "disabled" : "";
              $("#Group1Fields input").attr("disabled", disabled);
  
              //apply disabled style to all disabled controls
              $("input:disabled").addClass("disabled");
  
              //remove disabled style to all enabled controls
              $("input:not(:disabled)").removeClass("disabled");
  
          });
          $("input[name='Group2']").change(function () {
              var disabled = ($(this).val() == "No") ? "disabled" : "";
              $("#Group2Fields input").attr("disabled", disabled);
  
              //apply disabled style to all disabled controls
              $("input:disabled").addClass("disabled");
  
              //remove disabled style to all enabled controls
              $("input:not(:disabled)").removeClass("disabled");
          });           
  
      });
  &lt;/script&gt;
  </code></pre>