关于 html <button> 标签

Question

我正在尝试使用 HTML 按钮标签。但我有一个疑问：

该按钮不应总是出现，而应仅在满足某些条件时出现。我怎样才能实现这个？

具体：

用户搜索我的数据库。结果中的记录显示为表格。这些记录是事件列表，用户根据某些条件只能注册某些事件。 单击“注册”按钮即可注册任何活动。如何使该按钮仅出现在该用户有资格注册的记录旁边？

Answer 1

您应该在生成 html 页面时显示或不显示该按钮，即 在服务器端。 在进行实际注册之前，不要忘记稍后检查在服务器端用户是否有权注册。

Answer 2

如果要使用输入标签来提交表单，我会使用它。您可以选择根据您使用的语言有条件地在服务器端隐藏它，或者通过浏览器端的 JavaScript 隐藏它。

服务器端更可取，因为条件是在该端生成的。它还可以防止用户篡改浏览器端的内容。我还要确保后续阶段验证资格，而不仅仅是依赖按钮的存在。

Answer 3

如果您可以确定用户是否可以在服务器上注册该事件，则在这种情况下仅发出

<button>

。

如果您出于某种原因只能在客户端确定这一点（例如：他们的资格基于他们输入的其他一些信息），那么您可以以编程方式将 CSS

display

属性设置为

none

以使按钮消失，尽管在这种情况下简单地禁用该按钮可能更有意义。

Answer 4

var condition = ("foo" != "bar") ? true : false; 
                                          /* 
                                          change the part in parentheses
                                          to the condition
                                          that tests if user is eligible 
                                          to register for an event
                                          */
if (!condition) {
    document.getElementById("button").style.display = "none";
};

<button id="button">Register</button>

如果条件为真（如上面的代码片段），按钮不会隐藏，用户可以单击它。

var condition = ("foo" == "bar") ? true : false; 
                                          /* 
                                          Change the part in parentheses
                                          to the condition
                                          that tests if user is eligible 
                                          to register for an event 
                                          */
if (!condition) {
    document.getElementById("button").style.display = "none";
};

<button id="button">Register</button>

在此代码片段中，条件为 false，因此按钮隐藏，用户无法单击它。

---

在这个问题中，我假设您打算在用户不符合条件时隐藏该按钮。查看其他人的评论，您可能想改为“禁用”按钮。为此，只需更换线路 document.getElementById("button").style.display = "none";

与

document.getElementById("button").setAttribute("disabled", "")
。

如果您想在用户符合条件时重新启用该按钮（如果您禁用它），请使用

编写代码
document.getElementById("button").setAttribute("disabled", "")

其中 

setAttribute("disabled", "")
替换为

removeAttribute("disabled")

。如果您使用隐藏方法，请使用以下代码编写代码

document.getElementById("button").style.display = "none";

其中

none

替换为您将显示属性设置为之前的状态（

block

、

inline-block

、

flexbox

等）