基于父元素data attribute为子元素设置disabled pseudoclass的非JS实现方案咨询

嘿，我懂你不想碰JS的苦衷——有时候项目里的限制确实让人头大。先给你说清楚核心情况：纯CSS没法真正给按钮设置disabled这个HTML属性，因为CSS管的是样式和部分交互行为，没法修改DOM的属性值。但如果你的需求只是实现「视觉上的禁用效果+阻止用户点击交互」，那纯CSS完全可以搞定，而且非常简单。

给你具体的实现方案：

• 首先把按钮默认的disabled属性去掉，我们要通过body的data属性来控制它的状态：

<body data-online="true">
  <button>操作按钮</button>
</body>

• 然后写CSS规则，根据body的data-online值来切换按钮的状态：

/* 当body的data-online为false时，模拟禁用状态 */
body[data-online="false"] button {
  /* 视觉上变灰，贴近原生disabled的观感 */
  opacity: 0.6;
  /* 光标显示禁用样式 */
  cursor: not-allowed;
  /* 直接阻止所有点击、hover等交互行为 */
  pointer-events: none;
  
  /* 可选：更贴近原生禁用按钮的样式，可根据你的设计调整 */
  background-color: #e9ecef;
  border-color: #adb5bd;
  color: #6c757d;
}

/* 当data-online为true时，按钮恢复正常状态 */
body[data-online="true"] button {
  opacity: 1;
  cursor: pointer;
  pointer-events: auto;
  /* 这里可以写你正常按钮的自定义样式，或者留空继承默认样式 */
}

需要注意的是：这种方式只是模拟禁用状态，按钮的disabled属性并没有被真正设置。比如如果这个按钮是表单的提交按钮，表单仍然可以通过它提交；如果用JS获取button.disabled，返回的还是false。但如果你的场景只需要前端视觉和交互上的禁用，这个方案完全能满足需求，而且完全不需要JS。

如果你的场景必须要真正设置disabled属性（比如表单校验、后端依赖这个属性状态），那纯HTML/CSS确实做不到，这时候只能用JS——不过你说没法直接控制JS，或许可以试试极简的内联脚本？比如在body里加个onload事件快速处理：

<body data-online="true" onload="document.querySelector('button').disabled = !this.dataset.online">
  <button>操作按钮</button>
</body>

但这个还是用到了JS，如果你完全不能碰JS的话，那只能用前面的纯CSS模拟方案啦。

备注：内容来源于stack exchange，提问作者spethspeth