如何根据场景启用/禁用 html 按钮？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/6199773/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to enable/disable an html button based on scenarios?
提问by arun nair
I have a button in my webpage with below code -
我的网页中有一个带有以下代码的按钮 -
HTML:
HTML：
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>
CSS:
CSS：
.checkout-button{
width: 130px;
height: 35px;
background: url('../poc2/images/checkout.png') no-repeat;
border: none;
vertical-align: top;
margin-left:35px;
cursor:pointer;
}
Now, the button works fine as I can click on it and have my corresponding php code run; the pointer turns into the hand symbol letting the user clearly know that it is clickable and that its a button.
现在，该按钮工作正常，因为我可以单击它并运行相应的 php 代码；指针变成了手形符号，让用户清楚地知道它是可点击的，它是一个按钮。
What I would like to do is to modify the behavior of this button based on some conditions. Example pseudocode:
我想做的是根据某些条件修改此按钮的行为。示例伪代码：
if flag=1:
/* enable the button, and let the user click it and run the php code */
else:
/* display this button, but don't let any actions take place if the user clicks on it; */
How do I code this enable-disable logic for the button? Basically, I want the button to work as a button under normal situations; and just as a picture without any hyperlink under certain other situations.
如何为按钮编码此启用-禁用逻辑？基本上，我希望按钮在正常情况下作为按钮工作；就像在某些其他情况下没有任何超链接的图片一样。
回答by Pedro Correia
You can either do this without JavaScript (requires a page refresh) or with JavaScript and have no refresh.
您可以在不使用 JavaScript（需要刷新页面）的情况下执行此操作，也可以使用 JavaScript 而无需刷新。
Simply use the disabled attribute:
只需使用 disabled 属性：
<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>
And create a css style for it, if necessary. The example below shows a JavaScript solution. If the variable disableButtonis set to true, the button will be disabled, else it can be clicked:
并在必要时为它创建一个 css 样式。下面的示例显示了一个 JavaScript 解决方案。如果变量disableButton设置为true，按钮将被禁用，否则可以单击：
const disableButton = true; //change this value to false and the button will be clickable
const button = document.getElementById('checkout-button');
if (disableButton) button.disabled = "disabled";.checkout-button {
width: 130px;
height: 35px;
background: #333;
border: none;
vertical-align: top;
margin-left: 35px;
cursor: pointer;
color: #fff;
}
.checkout-button:disabled {
background: #999;
color: #555;
cursor: not-allowed;
}<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button">submit</button>回答by J0ANMM
You can do it either by modifying the attribute or by adding/removing a class.
您可以通过修改属性或添加/删除类来实现。
Modifying attribute
修改属性
You will want to switch between <button disabled="true">and <button disabled="false">
你会想要在<button disabled="true">和之间切换<button disabled="false">
With javascript, it could look like this:
使用 javascript，它可能如下所示：
if flag=1:
document.getElementById("your-btn").disabled = true;
else:
document.getElementById("your-btn").disabled = false;
And with jquery, like this:
和 jquery，像这样：
if flag=1:
$('#your-btn').prop('disabled', true);
else:
$('#your-btn').prop('disabled', false);
Adding/removing class
添加/删除类
Add the following css:
添加以下css：
.btn-disabled{
cursor: not-allowed;
pointer-events: none;
}
And add/remove a class to the button.
并向按钮添加/删除一个类。
With jquery:
使用 jquery：
if flag=1:
$('#your-btn').addClass('btn-disabled');
else:
$('#your-btn').removeClass('btn-disabled');
If you don't want jquery, but pure javascript, hereis how to do it.
如果您不想要 jquery，而是想要纯 javascript，这里是如何做到的。
回答by Gary Ryan
If your circumstance allows you could just remove the content in the actionattribute from the formtag. Therefor when a user clicks submit, no action is taken.
如果您的情况允许，您可以action从form标签中删除属性中的内容。因此，当用户点击提交时，不会采取任何行动。
