监听 jQuery 中选中/禁用的变化答案

【问题标题】：Listen for changes of checked/disabled in jQuery监听 jQuery 中选中/禁用的变化
【发布时间】：2015-09-30 15:26:51
【问题描述】：

我在 HTML 页面中有一些对象（div、输入/复选框）。它们的“checked”和“disabled”属性的值是通过一些 JS 函数设置的。我想监听这些属性的变化，但找不到任何函数或监听器来执行。

如何添加一个事件侦听器来侦听“已选中”或“已禁用”的更改并根据属性的状态执行一些代码（例如更改复选框 / div 的样式）？

谢谢

【问题讨论】：

为了改变样式，你可能想简单地使用 CSS 中的 :checked 伪类：jsfiddle.net/ceEnA。
我没有更改 CCS 样式，但将“禁用”之类的属性添加到 div
不确定你在追求什么，但是“（例如根据属性的状态改变复选框/div的样式”可以用CSS最容易地实现。
要扩展 @pimvdb 所说的内容，您还可以使用 :disabled 伪类 - 我对 pimvdb 的小提琴进行了（相当粗略的）更新：jsfiddle.net/ceEnA/2

标签： javascript jquery jquery-selectors

【解决方案1】：

关于“禁用”更改，您也许可以监听 DOMAttrModified 事件。有关详细信息，请参阅此测试用例： http://jsfiddle.net/4kWbp/1/

请注意，并非所有 UA 都支持 DOMAttrModified 等 DOM 突变事件，在那些支持它们的用户中，监听它们可能会导致性能下降。

直接设置 .checked 不会触发“更改”事件，并且似乎也不会触发 DOMAttrModified （尽管仅在 Opera 中测试过，这是一种未充分指定的规格间隙之间的东西，可能跨浏览器非常不一致。也许这是一个 Opera 错误。）

最后的手段可能是为这些属性定义 getter/setter。不过，那将是一个相当丑陋的 hack..

【讨论】：

嘿，我看到 Chrome 在这个测试中没有触发 DOMAttrModified。 Firefox 触发的事件比 Opera 少，因此不太一致。那好吧。因此，最好的方法是挂钩或修改设置 .checked 和 .disabled 的脚本，使其发送一些您可以收听或直接调用 JS 的事件。这对您的项目来说根本不是一个选择吗？

【解决方案2】：

您可以为:checked 和:disabled 使用伪选择器并触发一个空动画，从而导致animationstart 事件。例如：

select > option:checked {
    animation: checked 1ms;
}
select > option:not(:checked) {
    animation: unchecked 1ms;
}
@keyframes checked { from {}; to {}; }
@keyframes unchecked { from {}; to {}; }

然后在javascript中你可以使用：

document.body.querySelector('select').addEventListener('animationstart',
    function (ev) {
        console.dir(ev);
    });

该事件有可用的animationName 和target 属性，足以让您使用。

【讨论】：

【解决方案3】：

$('#Checkboxid:checked') 如果复选框值打开，则返回 true，如果复选框值关闭，则返回 false。这是 jquery 选择器功能：checked 可用于检查单选和复选框值。

语法如下：

$('#checkboxid:checked')

【讨论】：

但我不想选中所有选中的复选框，但我想对此状态的更改做出反应...如何将侦听器添加到“已选中”状态？

【解决方案4】：

要“监听”复选框何时被切换，请使用 change()：

$('.target').change(function() {
    console.log(this.checked ? 'Checked' : 'Not Checked');
});

【讨论】：

“更改”功能仅在复选框选择通过直接单击而不是通过脚本更改时触发，例如，使用 $(checkboxID).attr('checked', 'checked') ;

【解决方案5】：

使用:checked 确定页面或容器上选中的单选或复选框。

首先检查这个jsfiddle

在此之后，请按照此 stackoverflow 问题Jquery get selected checkboxes 编写您想要的结果。

您可以检查是否禁用：

var set=1;
var unset=0;
jQuery( function() {
  $( '.checkAll' ).live('click', function() {
    $( '.cb-element' ).each(function () {
      if(set==1){ $( '.cb-element' ).attr('checked', true) unset=0; }
      if(set==0){ $( '.cb-element' ).attr('checked', false); unset=1; }
    });
    set=unset;
  });
});

查看这些链接了解详情：

Jquery get selected checkboxes

Setting "checked" for a checkbox with jQuery?

【讨论】：

【解决方案6】：

我没有你的问题的答案，但我可以建议你尝试类似事件总线（在 GWT 中是事件处理程序）。

对于 JQuery，您可以使用 Events。

【讨论】：