如何在不使用JavaScript的情况下实现按钮点击一次后禁用（仅HTML、CSS）

嘿，这个需求挺有意思的——完全不用JS就能实现按钮点击一次后不可点击，我有个纯HTML+CSS的小技巧可以满足你的需求，核心思路是利用隐藏的复选框来记录点击状态，配合CSS选择器控制按钮的交互性：

<!DOCTYPE html>
<html>
<body>
  <!-- 隐藏的复选框，用来记录按钮是否被点击过 -->
  <input type="checkbox" id="btnTracker" hidden>
  
  <!-- 用label绑定复选框，点击按钮会触发复选框状态切换 -->
  <label for="btnTracker">
    <button>Click here</button>
  </label>

  <style>
    /* 当复选框被选中（按钮已点击），修改按钮的交互和样式 */
    #btnTracker:checked + label button {
      pointer-events: none; /* 阻止所有鼠标点击事件 */
      opacity: 0.6; /* 视觉上标记为禁用状态，可选 */
      cursor: not-allowed; /* 光标变为禁用样式，可选 */
      background-color: #ccc; /* 可选，调整背景色增强视觉提示 */
    }
  </style>
</body>
</html>

原理说明： #

• 隐藏的<input type="checkbox">作为状态容器，点击绑定它的<label>时，会自动切换复选框的checked状态
• CSS的相邻兄弟选择器+可以选中复选框后的<label>里的按钮，当复选框处于checked状态时，给按钮添加pointer-events: none属性，直接阻止所有鼠标点击操作
• 额外的样式（透明度、光标、背景色）是为了给用户更直观的禁用提示，你可以根据自己的需求调整或移除

这个方案完全不需要任何JavaScript代码，只依赖HTML表单元素的原生特性和CSS选择器就能实现需求，兼容性也很好，大多数现代浏览器都支持。

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