本文介绍了js与jquery设置按钮失效的方法,jquery设置disabled属性为true的方法,以及为超链接加上disabled属性的方法,需要的朋友参考下。
如何将设置disabled属性为true,即为不可用状态,分别用js、jquery与html实现。
例子:
//JS
document.getElementByIdx("btn").disabled=true;
//jquery
$("#btn").attr("disabled", true);
//html
<input type="button" value="提交" id="btn">
说到
jquery操作disabled属性,我们并不陌生,在之前的几篇文章:
中已有介绍,大家可以回顾下。
第二部分,为超链接添加disabled属性。
场情:
一张页面中原来有一个超链接按钮,点击后可以获取到短信认证码。
例子:
<a href="
javascript:reciverSms()">获取短信认证码</a>
<script type="text/javascript">
function reciverSms(){
var sms = getSmsCode();
}
</script>
但是考虑到频繁点击获取认证码,对相关设备的压力,就做了一个点击5秒后才允许再点击的逻辑。
修改为:
function reciverSms(obj){
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
获取一次短信后,链接禁用5秒。可是没有想的事情又来了,原来超链接禁用了后虽然样子变成禁用了,但是还是可以点击的,原来是个陷阱。
第三个版本:
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
windows.setTimeout(function(){
obj.disabled = false;
},5000);
}
之前说超连接disabled属性为true时,表现出来的样子是灰色不可用状态,但这里有个特例,如果这个超链接被设置了color的css属性样式,在非ie浏览器上表现出来的样子就不是禁用了,终于看到ie的好了。
第四个版本:
function reciverSms(obj){
if(obj.disabled){
return;
}
var sms = getSmsCode();
obj.disabled = true;
addClass(obj,"gray");
windows.setTimeout(function(){
obj.disabled = false;
removeClass(obj,"gray");
},5000);
}
第二部分,jquery让input从disabled变成enabled。
例子:
document.getElementById("removeButton").disabled = false;//普通Js写法
$("#removeButton").removeAttr("disabled");//要变成Enable,JQuery只能这么写
$("#removeButton").attr("disabled","disabled");//再改成disabled