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

【问题标题】：How to enable/disable an html button based on scenarios?如何根据场景启用/禁用 html 按钮？
【发布时间】：2011-06-01 10:33:06
【问题描述】：

我的网页中有一个带有以下代码的按钮 -

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

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

【问题讨论】：

你愿意使用一些 JavaScript/JQuery 吗？

标签： html css button

【解决方案1】：

您可以不使用 JavaScript（需要刷新页面）或使用 JavaScript 并且不刷新。

只需使用 disabled 属性：

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

&lt;button type="submit" class="checkout-button" id="checkout-button" name="checkout-button"&gt;submit&lt;/button&gt;

【讨论】：

感谢 --->>> var button = document.getElementById('checkout-button'); button.disabled = '禁用';

【解决方案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，here 是怎么做的。

【讨论】：

【解决方案3】：

如果您的情况允许，您可以从form 标记中删除action 属性中的内容。因此，当用户点击提交时，不会执行任何操作。

【讨论】：