前言
最近业务场景中遇到比较多的一个需求，当正在执行异步操作时，需要将一些按钮置灰，并不可用。今天总结一下。
diabled属性
disabled禁用表单字段。
- 无法使用和无法点击
- 被禁用的表单元素不会被提交
- 不适用于
<input type="hidden" > - 浏览器带有默认样式
样式部分
虽然浏览器带有默认样式，但是在某些场景，比如button元素，我们通常都会自定义样式，这样将会覆盖浏览器的默认样式，造成disabled生效时，无明显现象。
demo.png
从上图可以看出，自定义样式层叠的权重比较高，将浏览器的默认样式覆盖了。
- 针对所有button的disabled状态设置样式
## 使用选择器:disabled
button:disabled {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
## 使用选择器[disabled]
button[disabled] {
pointer-events: none;
cursor: not-allowed;
filter: alpha(opacity=65);
-webkit-box-shadow: none;
box-shadow: none;
opacity: .65;
}
readly区别
readly适用于表单文本类元素(input[text,password,file],textarea)
readly可使文本框聚焦
a链接disabled方案
disabled对a链接是无效的。
- css方案
- 利用选择器
[attribute]设置样式 - 利用
pointer-events设置鼠标点击事件无效
- 利用选择器
优点: 简单
缺点：只能禁止鼠标事件
- js方案
- 阻止默认事件(只是阻止跳转)
- 添加属性，通过此属性判断是否执行相关操作(a链接当做button使用)
select, radio, check-box的readonly方案
readonly对以上三个元素无效。
方案：
- 设置disabled属性(将导致不提交此元素)
- 将元素的值存储在hidden中
demo源码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>disabled O(∩_∩)O~~</title>
<style>
.btn-primary {
background: #ff0000;
outline: none;
border: 1px solid #333;
color: #fff;
cursor: pointer;
}
.btn-disabled {
opacity: 0.5;
cursor: not-allowed;
}
p {
padding: 10px 50px;
}
.btn[disabled] {
pointer-events: none;
opacity: 0.5;
cursor: not-allowed;
}
</style>
</head>
<body>
<p>
<button type="button" name="button" disabled="disabled">普通disabled</button>
<span>chrome浏览器默认样式</span>
</p>
<p>
<button type="submit" class="btn-primary" name="button" onclick="clickMe()">自定义样式</button>
自定义的基础样式
</p>
<p>
<button type="submit" class="btn-primary" name="button" disabled="disabled" onclick="clickMe()">自定义样式</button>
自定义的基础样式，浏览器默认样式
</p>
<p>
<button type="submit" class="btn-primary btn-disabled" name="button" disabled="disabled" onclick="clickMe()">自定义样式和disabled</button>
自定义的基础样式，自定义的diabled状态样式
</p>
<p>
<a class="btn" disabled="disabled" href="#">I'm a link</a>
带有disabled属性的a链接
</p>
</body>
<script>
function clickMe() {
alert("可以")
}
</script>
</html>
