Question

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

如何添加侦听“已检查”或“已禁用”更改的事件侦听器并执行某些代码（例如更改checkbox / div的样式），具体取决于属性的状态？

由于

Answer 1

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

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

直接设置.checked不会触发“更改”事件，也不会触发DOMAttrModified（仅在Opera中进行过测试，这可能是指定间隔不足的东西）在浏览器中非常不一致。也许这是一个Opera错误。）

最后的手段可能是为这些属性定义getter / setter。那将是一个相当难看的黑客..

Answer 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个可供您使用的属性。

Answer 3

$（'＃Checkboxid：checked'）如果复选框值打开，这将返回true，如果复选框值关闭，则返回false。这是jquery选择器功能：checked可用于检查收音机和复选框值。

语法如下：

$('#checkboxid:checked')

Answer 4

要在切换复选框时“收听”，请使用change（）：

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

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

Answer 6

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

对于JQuery，您可以使用Events。

在jQuery中监听已选中/已禁用的更改

6 个答案: