目录
1.设置input和label的样式为不可点击。
2.设置input的readonly属性。
3.若想变回可修改，用js实现
4.如何自定义radio的颜色。
5.完整代码
input的单选框有时候需要实现只读，两个办法，一个disabled，一个是readonly.
但disabled设置后，颜色为灰色，如图所示，有时候会不明显。
readonly设置后，还是可以修改。
在网上试了好多种方法都不行，找到一个可以实现。如下
1.设置input和label的样式为不可点击。
<style type="text/css">
label{
pointer-events: none;
}
input{
pointer-events: none;
}
</style>2.设置input的readonly属性。
<input type="radio" id="aaa" name="made" value="aaa" checked="checked" readonly="readonly"/>
<label for="aaa">第一</label>
<input type="radio" id="bbb" name="made" value="aaa" readonly="readonly" />
<label for="bbb">第二</label>3.若想变回可修改，用js实现
$('input[type="radio"]').css("pointer-events","auto");
$('label').css("pointer-events","auto");这样就能实现既不能修改，又显示颜色。
4.如何自定义radio的颜色。
input{
accent-color: red;//选中后的颜色
}
5.完整代码
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<style type="text/css">
label{
pointer-events: none;
}
input{
pointer-events: none;
accent-color: red;
}
</style>
</head>
<body>
<input type="radio" id="aaa" name="made" value="aaa" checked="checked" readonly="readonly"/>
<label for="aaa">第一</label>
<input type="radio" id="bbb" name="made" value="aaa" readonly="readonly" />
<label for="bbb">第二</label>
<h1></h1>
<div id="cds">
<button type="button" onclick="changeFn()">可修改</button>
</div>
<script type="text/javascript">
function changeFn(){
$('input[type="radio"]').css("pointer-events","auto");
$('label').css("pointer-events","auto");
}
</script>
</body>
</html>
运行结果：
