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

在前端使用单选按钮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浏览器版本太低的原因