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>
4条答案
按热度按时间6yt4nkrj1#
在进一步研究这个问题之后,我偶然发现了Rick Strahl的一篇博客文章,其中我们演示了一个允许监视CSS属性的jQuery插件:jQuery CSS Property Monitoring Plug-in updated
b1payxdu2#
虽然有更有效的方法来解决这个问题,但其中一种方法是每xx秒运行一个函数,在禁用的元素上设置所需的CSS类:
这将每秒钟检查所有输入元素。但同样,这是一个非常糟糕的解决方案。你最好重组你的代码。
在不过多修改代码和HTML的情况下,我会做如下操作(但没有测试):
pu82cl6c3#
我假设你想在同一个字段集中启用文本输入,嗯?给予看:
nbysray54#
你可以利用你的布局,让你所有的处理程序相对地查找东西,这样就缩短了你所有的代码:
You can view a demo here,同样,因为你知道哪些类,元素,以及你想让它开还是关,你可以使用
.toggleClass(class, bool)
来进一步简化事情。如果你想让它更精确,你可以给予那些单选按钮一个类,例如:然后你可以用
$(".toggler")
代替$(":radio")
,同样的,你可以给予它一个类,用.siblings(".fields")
代替.siblings("div")
......关键是如果你的布局是一致的,当DRY coding的时候就利用它。