html - HTML 一次性可点击按钮

Question

我有一个只能点击一次的按钮。截至目前，我正在用 Javascript 处理这个问题，但我不喜欢这三件事：

• 它不能无脚本地工作（注意按钮效果，长话短说我们正在使用 Derby）
• 它是有状态的，这会导致其他设计问题
• 似乎应该有一个纯 HTML 或 CSS 解决方案，因为它是一个非常简单且可能很常见的功能。

JS-less的方式来做到这一点？

Answer 1

试试这个 CSS 技巧：

<label><input type="radio" /><button>Your button</button></label>

CSS：

label>input[type="radio"], label>input[type="radio"]:checked~button {display:none}

这将导致按钮在您单击一次时消失。对于任何更“漂亮”的东西，您将需要使用 JavaScript。

Answer 2

JS-less 方式.. 不.. 可能的解决方案是添加一个 JS 函数，将其添加disabled="disabled"并绑定到按钮onClick，它将不再可点击。

Answer 3

如果页面被重新提供（即有一些服务器端组件），服务器将不得不发送回带有禁用按钮的更新的 HTML。否则，您将在客户端更改 HTML，而 Javascript 就是这样。