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就是这样。