我的网页上有一个带有以下代码的按钮 -
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 的情况下执行此操作(需要刷新页面),也可以使用 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>
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)