checkbox、radio模拟设置成只读效果不让用户手动勾选

在web开发时，有时候页面需要显示一些复选框（checkbox）、单选框（radio），目的就是想告知用户一组状态信息而不是想让用户在此处手动勾选（比如在信息展示页面），并且最后表单以POST或GET的方式提交时需要作为参数传递到后台。
       一提到只读，首先很容易让人想到使用readonly属性，但是对于复选框、单选框来说，这个属性和期望得到的效果是有差别的。原因在于readonly属性关联的是页面元素的value属性（例如text、password、textarea等，设置了readonly就不能修改输入框的文本内容），而复选框、单选框的勾选/取消并不改变其value属性，改变的只是checked状态。所以对于checkbox、radio来说，设置了readonly属性，仍然是可以勾选/取消的。然后联想到使用与readonly类似功能的disabled属性吧，这个属性的作用是设置页面元素不可用，即不可进行任何交互操作，表单以POST或GET的方式提交时也不能作为参数传递到后台。
        从上面看出，无论是readonly还是disabled都没有达到我们期望的效果，那既然直接实现不了，我们就变通实现一下，模拟实现呗。效果示例代码如下：

css代码部分:

/* 只读效果样式 */
input.ipt_readonly {
    color: #AAA;
    background-color: #E0E0E0 !important;
    opacity: 1;  /* 取值范围：0~1 */
    filter: alpha(opacity=100);  /* 兼容IE6、7、8  取值范围：0~100 */
}

html关键代码:

<label>真男人：</label>
是<input type="checkbox" id="R1TD11" name="R1_1" value="1" class="ipt_readonly" onclick="return false;" checked="checked"/>
否<input type="checkbox" id="R1TD12" name="R1_1" value="0" class="ipt_readonly" onclick="return false;"/>

 

参考自  https://www.cnblogs.com/firstdream/p/7839266.html

---

写到这里顺便记录一下，在js中switch代替if(表达式)语句的写法，如下：

var w = 150; 
switch (true) {
    case w > 200 :
        console.log("w > 200");
        break;
    case w > 100 :
        console.log("w > 100");
        break;
    default:
        console.log("default!"); 
}

 

用心工作，认真生活。 共勉！