jQuery 1.12.1环境下如何监听元素属性变化并执行对应操作

首先明确你原有代码失效的核心原因：

• jQuery 没有提供直接监听元素属性变更的内置方法，change 事件仅能触发于表单元素value值变更的场景，无法响应disabled这类属性的修改
• 你尝试的onchange是原生DOM事件属性，jQuery 事件绑定的正确语法为.on('change', function(){})，且即使语法正确也无法满足属性监听的需求

方案1：使用原生MutationObserver API（推荐） #

无需引入第三方插件，完全独立运行，不管通过任何方式修改元素属性都能触发监听，支持IE11及以上所有浏览器，和jQuery 1.12.1完全兼容：

// 选择监听目标
const target = document.querySelector('#subBut');
// 配置监听规则：仅监听disabled属性变更
const observerOptions = {
  attributes: true,
  attributeFilter: ['disabled']
};
// 创建观察者实例
const attrObserver = new MutationObserver((mutations) => {
  mutations.forEach(mutation => {
    if (mutation.attributeName === 'disabled') {
      const isDisabled = $(target).prop('disabled');
      isDisabled ? $('#reasons').slideDown() : $('#reasons').slideUp();
    }
  });
});
// 启动监听
attrObserver.observe(target, observerOptions);

如果后续需要停止监听，可执行attrObserver.disconnect()。

方案2：jQuery Prop方法劫持（兼容IE10及更早版本） #

如果你的业务需要兼容IE10及更老的浏览器，且所有disabled属性变更都是通过jQuery的prop()方法触发的，可以通过劫持jQuery原生prop方法实现监听，无需修改现有业务代码：

// 备份原生prop方法
const originalProp = $.fn.prop;
// 重写prop方法，增加自定义事件触发
$.fn.prop = function(propName, propValue) {
  const result = originalProp.apply(this, arguments);
  // 仅在属性赋值操作时触发自定义事件
  if (typeof propValue !== 'undefined') {
    this.trigger('prop:change', [propName, propValue]);
  }
  return result;
};

// 绑定自定义属性变更事件
$('#subBut').on('prop:change', function(e, propName, propValue) {
  if (propName === 'disabled') {
    propValue ? $('#reasons').slideDown() : $('#reasons').slideUp();
  }
});

内容的提问来源于stack exchange，提问作者Mm-Art-In