在jQuery中监视DOM更改

3okqufwl 于 2022-12-22 发布在 jQuery

关注(0)|答案(4)|浏览(96)

jQuery中是否有一种方法可以检测输入的disabled属性何时发生变化。我想根据值切换样式。
我可以为每个更改事件复制/粘贴相同的启用/禁用代码（如下所述），但我一直在寻找一种更通用的方法。
我可以创建一个自定义事件来监视指定输入的disabled属性吗？
示例：

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

jquery

来源：https://stackoverflow.com/questions/3017768/monitoring-dom-changes-in-jquery

4条答案

按热度按时间

6yt4nkrj1#

在进一步研究这个问题之后，我偶然发现了Rick Strahl的一篇博客文章，其中我们演示了一个允许监视CSS属性的jQuery插件：jQuery CSS Property Monitoring Plug-in updated

赞(0）回复(0）举报 2022-12-22

b1payxdu2#

虽然有更有效的方法来解决这个问题，但其中一种方法是每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");
    });

赞(0）回复(0）举报 2022-12-22

pu82cl6c3#

我假设你想在同一个字段集中启用文本输入，嗯？给予看：

$('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', '');
  }
});

赞(0）回复(0）举报 2022-12-22

nbysray54#

你可以利用你的布局，让你所有的处理程序相对地查找东西，这样就缩短了你所有的代码：

$(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" />

然后你可以用$(".toggler")代替$(":radio")，同样的，你可以给予它一个类，用.siblings(".fields")代替.siblings("div") ......关键是如果你的布局是一致的，当DRY coding的时候就利用它。

赞(0）回复(0）举报 2022-12-22

我来回答

在jQuery中监视DOM更改

4条答案

相关问题

热门标签

最新问答