在前端使用单选按钮input[type=radio]时,渲染后台数据时将单选按钮设为不可修改,给input加上disabled后,按钮颜色变灰,且通过css修改样式也无法改变。
通过百度尝试了类似以下方式的几种修改css样式的常用办法解决:
但在我这还是无效,突然奇想改变思考方式,不再思考如何修改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]不可修改且按钮仍有颜色:
注意:但此方法似乎在ie浏览器中不起作用,即pointer-events属性在IE浏览器中是无效的,不知道是不是我ie浏览器版本太低的原因