监听元素禁用事件答案

【问题标题】：Listening for an element disable event监听元素禁用事件
【发布时间】：2015-06-24 13:37:26
【问题描述】：

有没有办法监听disabled DOM 属性的变化？

类似这样的：

setTimeout(function () {
    $("#myElem").prop('disabled', true);
}, 1500);

$("#myElem").on('disabled', function(e){
    alert('my custom code');
});

这里还有一个fiddle.

编辑：如果可能，我想要一个通用的解决方案。例如，在我的应用程序中，我使用的是 MVVM 框架 (Knockout)，它在内部处理属性更改：

<button data-bind="disable: time > 3">
</button>

我声明了禁用逻辑，但我没有手动禁用它。我想要手动做的是挂钩那个事件，所以我可以做我的自定义逻辑。

我在 SO 上看到了example：

jQuery.propHooks.disabled = {
  set: function (el, value) {
    if (el.disabled !== value) {
      el.disabled = value;
      value && $(el).trigger('disabledSet');
      !value && $(el).trigger('enabledSet');
    }
  }
};

但这似乎不起作用。

【问题讨论】：

标签： javascript jquery html css

【解决方案1】：

您应该为此使用Mutation Observers：

// Set up a new observer
var observer = new MutationObserver(function(mutations) {
    mutations.forEach(function(mutation) {
        // Check the modified attributeName is "disabled"
        if(mutation.attributeName === "disabled") {
            alert("disabled changed");
        }
    });    
});
// Configure to only listen to attribute changes
var config = { attributes: true };
// Start observing myElem
observer.observe(myElem, config);

// Testing the observer gets triggered
setTimeout(function() {
    myElem.disabled = true;
}, 2000);

&lt;input id="myElem"&gt;

虽然要注意modern browser support很好，但不支持IE也许可以让旧的Mutation events 在 IE9/10 中工作，但它们的支持不是很好。如果做不到这一点，setInterval 可以用来“监视”元素，但这只能作为最后的手段。

【讨论】：

注意：如果您的 button 位于 fieldset 内，您可能需要小心也可以禁用（您还需要观察该元素）

【解决方案2】：

你可以有一个间隔来检查它是否被禁用

  setTimeout(function () {
    $("#third").prop('disabled', true);
  }, 1500);
var test=window.setInterval(function(){
    var d=$('#third').attr('disabled');
    if(d=='disabled'){
        alert('my custom code');
        clearInterval(test);
    }
}, 500);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button type="button">first</button>
<button type="button">second</button>
<button type="button" autofocus id="third">third</button>

【讨论】：