单选按钮input[type=radio],加上disabled后按钮颜色失效,始终默认为灰色

在前端使用单选按钮input[type=radio]时,渲染后台数据时将单选按钮设为不可修改,给input加上disabled后,按钮颜色变灰,且通过css修改样式也无法改变。

通过百度尝试了类似以下方式的几种修改css样式的常用办法解决:
单选按钮input[type=radio],加上disabled后按钮颜色失效,始终默认为灰色
但在我这还是无效,突然奇想改变思考方式,不再思考如何修改input[type=radio]加上disabled后的默认样式,而是想将问题变为如何让单选按钮input[type=radio]被渲染后,不可再选择其他按钮,即禁止鼠标点击事件。

因为单选按钮input[type=radio] 使用 readonly 无效,所以一直没考虑对readonly 进行控制。

解决办法: 如今就是给渲染后的单选按钮input[type=radio] 加上readonly ,然后通过css设置其没有鼠标点击事件,即:

pointer-events: none;

若readonly 是通过jQuery加上去的,也可以通过jQuery设置css:

$('.sub').css("pointer-events","none");

在需要变回有鼠标点击事件,再设置:

$('.sub').css("pointer-events","auto");

此方法用后,单选按钮input[type=radio]不可修改且按钮仍有颜色:

单选按钮input[type=radio],加上disabled后按钮颜色失效,始终默认为灰色

注意:但此方法似乎在ie浏览器中不起作用,即pointer-events属性在IE浏览器中是无效的,不知道是不是我ie浏览器版本太低的原因

上一篇:[Windows]多网卡配置网卡优先级


下一篇:jeecg框架中禁用状态的提交