在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。