在JQuery中監視DOM更改

Question

有沒有一種方法可以檢測JQuery中輸入的禁用屬性何時更改。我想根據值切換樣式。

我可以爲每個更改事件複製/粘貼相同的啓用/禁用代碼（如下所示），但我正在尋找更通用的方法。

我可以創建一個自定義事件來監視指定輸入的禁用屬性嗎？

例子：

<style type="text/css">.disabled{ background-color:#dcdcdc; }</style> 


<fieldset> 
    <legend>Option 1</legend> 
    <input type="radio" name="Group1" id="Radio1" value="Yes" />Yes 
    <input type="radio" name="Group1" id="Radio2" value="No" checked="checked" />No 
    <div id="Group1Fields" style="margin-left: 20px;"> 
     Percentage 1: 
     <input type="text" id="Percentage1" disabled="disabled" /><br /> 
     Percentage 2: 
     <input type="text" id="Percentage2" disabled="disabled" /><br /> 
    </div> 
</fieldset> 
<fieldset> 
    <legend>Option 2</legend> 
    <input type="radio" name="Group2" id="Radio3" value="Yes" checked="checked" />Yes 
    <input type="radio" name="Group2" id="Radio4" value="No" />No 
    <div id="Group2Fields" style="margin-left: 20px;"> 
     Percentage 1: 
     <input type="text" id="Text1" /><br /> 
     Percentage 2: 
     <input type="text" id="Text2" /><br /> 
    </div> 
</fieldset> 
<script type="text/javascript"> 
    $(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"); 
     });   

    }); 
</script> 

Answer 1

進一步研究這個問題後，我偶然發現了由Rick施特拉爾一篇博客文章中，我們演示了一個jQuery插件，允許監測的CSS屬性：jQuery CSS Property Monitoring Plug-in updated

Answer 2

我假設你要能夠在相同的字段集的文本輸入框，是嗎？這給一試：

$('input[type="radio"]').change(function() { 
    if (this.value == "No") { 
    $('input[type="text"]', $(this).parents('fieldset')).attr('disabled', 'disabled'); 
    } else { 
    $('input[type="text"]', $(this).parents('fieldset')).attr('disabled', ''); 
    } 
}); 

Answer 3

雖然有解決這個問題的更有效的方法，處理的方式之一是通過運行每XX秒功能，將設置禁用的元素所需的CSS類：

window.setInterval(1000,function() { 
    $("input:disabled").addClass("disabled"); 
    $("input:enabled").removeClass("disabled"); 
}); 

這將每秒鐘檢查所有輸入元素。但是，這又是一個非常糟糕的解決方案。你最好重構你的代碼。

不改變太多的代碼和HTML的，我會做這樣的事情（沒雖然測試）：

$("input[name^=Group]").change(function() { 
     var disabled = ($(this).val() == "No") ? "disabled" : ""; 
     var groupName = $(this).attr("name"); 

     $("#" + groupName + "Fields input") 
      .attr("disabled", disabled) 
      .addClass("disabled"); 

     //remove disabled style to all enabled controls 
     $("input:enabled)").removeClass("disabled"); 
    }); 

Answer 4

你可以利用你的佈局，使所有的處理程序找到事情比較，縮短您目前所有的代碼如下：

$(function() { 
    $("input:disabled").addClass("disabled"); 

    $(":radio").change(function() { 
     var disabled = this.checked && this.value == "No"; 
     $(this).siblings("div").find("input") 
      .attr('disabled', disabled) 
      .toggleClass('disabled', disabled); 
    }); 
}); 

You can view a demo here，也因爲你是哪一個類，元素，你是否希望或關閉，您可以用.toggleClass(class, bool)縮短的事情了，但進一步。如果你想這是更精確，你可以給那些單選按鈕的一類，例如：

<input type="radio" name="Group1" id="Radio1" value="Yes" class="toggler" /> 

然後，你可以爲div做$(".toggler")代替$(":radio")，同樣的，你可以給它一個類，做.siblings(".fields")而不是.siblings("div") ......重點是如果你的佈局是一致的，那就用你的優勢吧DRY coding。