本文介绍了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