如何在CSS中根据动态disabled属性筛选span元素（兼容Chrome浏览器）

这个问题的核心原因很明确：<span>不是HTML标准中支持disabled属性的元素——只有表单控件（如<button>、<input>、<select>等）才属于原生可禁用的元素。Chrome严格遵循W3C标准，不会将非表单元素的disabled属性视为有效的状态标识，因此你的.GridHeader[disabled="disabled"]选择器无法生效；而IE出于历史兼容性的特殊处理，才会识别这种非标准用法。

考虑到你不想通过jQuery的addClass/removeClass修改大量文件，这里有两个最小改动的解决方案：

方案1：修改JS代码操作HTML属性而非DOM属性 #

你当前的JS代码是直接设置DOM对象的disabled属性：

document.getElementById('lblChecks').disabled = false/true;

对于非表单元素，这种方式只会修改DOM对象的属性，不会同步到HTML标签的属性中，导致Chrome的CSS属性选择器无法捕获状态变化。你可以改用setAttribute和removeAttribute来操作HTML属性：

// 禁用元素
document.getElementById('lblChecks').setAttribute('disabled', 'disabled');
// 启用元素
document.getElementById('lblChecks').removeAttribute('disabled');

这样修改后，HTML标签的disabled属性会动态添加/移除，Chrome的.GridHeader[disabled="disabled"]选择器就能正常识别样式了。这个改动只需要替换JS中的赋值语句，适合批量修改大量文件。

方案2：改用自定义数据属性（兼容更广泛） #

如果不想依赖非标准的disabled属性，也可以改用HTML5的自定义数据属性data-disabled，这样所有现代浏览器都能完美兼容：

1. 修改HTML初始状态：

<span id="lblChecks" data-disabled="true" class="GridHeader" onclick="ChecksPoPuP();" style="display:inline-block;color:White;height:19px;width:132px;cursor: hand;">Cheques</span>

2. 调整CSS选择器：

.GridHeader[data-disabled="true"] {
  /* 你的禁用样式 */
}

3. 修改JS代码操作数据属性：

// 禁用元素
document.getElementById('lblChecks').dataset.disabled = 'true';
// 启用元素
document.getElementById('lblChecks').dataset.disabled = 'false';

这个方案更符合标准规范，避免了依赖浏览器的兼容性行为，同样只需要少量的代码替换。

另外补充一点：即使你解决了CSS样式的问题，<span>的onclick事件在禁用状态下仍然会触发。如果需要阻止点击行为，你可以在ChecksPoPuP()函数开头添加判断：

function ChecksPoPuP() {
  const elem = document.getElementById('lblChecks');
  // 根据你用的方案判断禁用状态
  if (elem.hasAttribute('disabled') || elem.dataset.disabled === 'true') {
    return;
  }
  // 原有业务逻辑
}

内容的提问来源于stack exchange，提问作者Mazen Aj