jquery设置disabled属性为true的方法 超链接加上disabled属性

发布时间:2020-06-18编辑:脚本学堂
本文介绍了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