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

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

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

修改属性

你会想要在<button disabled="true">和之间切换<button disabled="false">

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

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

和 jquery，像这样：

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

添加/删除类

添加以下css：

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

并向按钮添加/删除一个类。

使用 jquery：

if flag=1: 
    $('#your-btn').addClass('btn-disabled');
else: 
    $('#your-btn').removeClass('btn-disabled');

如果您不想要 jquery，而是想要纯 javascript，这里是如何做到的。

Answer 2

您可以在没有JavaScript(需要页面刷新)或JavaScript的情况下执行此操作,并且无需刷新.

只需使用disabled属性:

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

并为它创建一个css样式,如下例所示:

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