如何根据场景启用/禁用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

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

只需使用禁用属性：

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

如有必要，为其创建一个 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>

Answer 2

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

修改属性

您需要在

<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 3

如果您的情况允许，您可以从

action

标签中删除

form

属性中的内容。因此，当用户单击“提交”时，不会执行任何操作。