监视JQuery中的DOM更改
是否有一种方法可以检测JQuery中输入的禁用属性何时发生更改。我想根据值切换样式 我可以为每个更改事件复制/粘贴相同的启用/禁用代码,如下所示,但我正在寻找一种更通用的方法 我可以创建一个自定义事件来监视指定输入的禁用属性吗 例如:监视JQuery中的DOM更改,jquery,javascript-events,Jquery,Javascript Events,是否有一种方法可以检测JQuery中输入的禁用属性何时发生更改。我想根据值切换样式 我可以为每个更改事件复制/粘贴相同的启用/禁用代码,如下所示,但我正在寻找一种更通用的方法 我可以创建一个自定义事件来监视指定输入的禁用属性吗 例如: <style type="text/css">.disabled{ background-color:#dcdcdc; }</style> <fieldset> <legend>Option 1<
<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>
我假设您希望在同一字段集中启用文本输入,嗯?尝试一下:
$('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', '');
}
});
尽管有更有效的方法来解决这个问题,但处理这个问题的一种方法是每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");
});
您可以利用您的布局,让所有处理程序相对地查找内容,从而缩短所有当前代码:
$(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);
});
});
,也因为您知道哪些类、元素以及是否要打开或关闭,所以您可以使用它来进一步缩短时间。如果希望更精确,可以为这些单选按钮设置一个类,例如:
<input type="radio" name="Group1" id="Radio1" value="Yes" class="toggler" />
然后你可以用$.toggler代替$:radio,对div也一样,你可以给它一个类,用.siblines.fields代替.siblingsdiv…关键是如果你的布局是一致的,当你进一步研究这个问题后,利用这个优势,我偶然发现Rick Strahl的一篇博文,其中我们演示了一个jQuery插件,该插件允许监控CSS属性:请重新阅读问题。我希望检测页面上任何输入的禁用属性何时更改。我将在页面上有大量的输入,不想在每个更改事件处理程序中重复相同的逻辑。谢谢回答。我想你的解决方案确实有效,但它看起来确实像一个黑客。希望有更好的方法-这不是个好主意。首先,这对性能不好,其次,这总是会有某种滞后。这不是我要说的吗?这是一个非常糟糕的解决方案谢谢你回答尼克。我不太关心代码的枯燥。这只是一个例子,我认为我的布局不够灵活,在所有情况下都可以。我希望用一种事件策略来解决这个问题。