radio按扭设置只读_disabled属性样式问题

前言

最近业务场景中遇到比较多的一个需求，当正在执行异步操作时，需要将一些按钮置灰，并不可用。今天总结一下。

diabled属性

disabled禁用表单字段。

无法使用和无法点击

被禁用的表单元素不会被提交

不适用于

浏览器带有默认样式

样式部分

虽然浏览器带有默认样式，但是在某些场景，比如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;