如何实现单选按钮可点击但无法被选中？

当元素设置disabled属性后，浏览器会阻止它触发任何鼠标交互事件，所以直接给disabled的单选按钮绑定onclick是无效的。以下是几种可行的解决方案：

方案1：阻止默认选中行为，去掉disabled属性 #

直接移除disabled，在onclick事件中通过return false阻止单选按钮的选中默认行为，这样点击时不会选中，但事件会正常触发：

<input class="language-checkbox" name="languages-settings" type="radio" onclick="nonAvailable('englishLan'); return false;">

方案2：CSS模拟禁用样式，保留交互能力 #

如果需要保持"禁用"的视觉效果（比如灰显、禁止光标），可以用CSS模拟disabled的样式，同时去掉disabled属性并阻止默认选中：

<input class="language-checkbox disabled-fake" name="languages-settings" type="radio" onclick="nonAvailable('englishLan'); return false;">

对应的CSS：

.disabled-fake {
  opacity: 0.6;
  cursor: not-allowed;
  pointer-events: auto; /* 确保能接收点击 */
}

方案3：利用事件冒泡，绑定事件到父元素 #

如果必须保留disabled属性，可以将点击事件绑定到单选按钮的父元素上，通过事件冒泡来触发逻辑：

<div class="radio-wrapper" onclick="checkRadioClick(event)">
  <input class="language-checkbox" name="languages-settings" disabled="true" type="radio">
</div>

对应的JS：

function checkRadioClick(event) {
  // 判断点击目标是目标单选按钮时执行逻辑
  if (event.target.matches('.language-checkbox')) {
    nonAvailable('englishLan');
  }
}

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