监视JQuery中的DOM更改 [英] Monitoring DOM Changes in JQuery

问题描述

有没有办法检测输入的disabled属性何时在JQuery中发生变化。我想根据值切换样式。

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.

我可以为每个更改事件复制/粘贴相同的启用/禁用代码（如下所示）但我是寻找更通用的方法。

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.

我可以创建一个自定义事件来监控指定输入的已禁用属性吗？

Can I create a custom event that will monitor the disabled attribute of specified inputs?

示例：

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

推荐答案

在进一步研究这个问题之后，我偶然发现了一个博客由Rick Strahl发布，其中我们演示了一个允许监视CSS属性的jQuery插件：更新了jQuery CSS Property Monitoring插件

After further researching this issue, I stumbled upon a blog post by Rick Strahl in which we demonstrates a jQuery plug-in that allows for monitoring of CSS properties: jQuery CSS Property Monitoring Plug-in updated

这篇关于监视JQuery中的DOM更改的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！