Question

我的网页上有一个按钮，代码如下 -

HTML：

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"></button>

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;
}

现在，按钮工作正常，因为我可以单击它并运行相应的PHP代码;指针变成手形符号，让用户清楚地知道它是可点击的，并且是一个按钮。

我想要做的是根据某些条件修改此按钮的行为。示例伪代码：

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; */

如何为按钮编写此启用禁用逻辑？基本上，我希望按钮在正常情况下作为按钮工作;就像在某些其他情况下没有任何超链接的图片一样。

Answer 1

您可以在没有JavaScript（需要页面刷新）或JavaScript的情况下执行此操作，并且无需刷新。

只需使用disabled属性：

<button type="submit" class="checkout-button" id="checkout-button" name="checkout-button" disabled="disabled"></button>

并为其创建一个css样式，如下例所示：

http://jsfiddle.net/Rgsen/14/

Answer 2

如果您的情况允许，您只需从action标记中移除form属性中的内容即可。因此，当用户点击提交时，不会采取任何措施。

Answer 3

您可以通过修改属性或添加/删除类来实现。

修改属性

您需要在a和<button disabled="true">

之间切换

使用javascript，它可能如下所示：

<button disabled="false">

用jquery，像这样：

if flag=1: 
    document.getElementById("your-btn").disabled = true;
else: 
    document.getElementById("your-btn").disabled = false;

添加/删除类

添加以下css：

if flag=1: 
    $('#your-btn').prop('disabled', true);
else: 
    $('#your-btn').prop('disabled', false);

在按钮中添加/删除一个类。

使用jquery：

.btn-disabled{
    cursor: not-allowed;
    pointer-events: none;
}

如果您不想要jquery，但纯javascript，here是如何做到的。

如何根据场景启用/禁用html按钮？

3 个答案:

修改属性

添加/删除类