表单控件的只读展示

表单控件的只读显示

     通常在内容查看，打印预览等页面，需要对表单控件做只读显示，即不能更改控件的状态。这里我们会用到2个常用属性readonly和disable。

     当readonly为true时，表单控件表现为不可编辑；当disable为true时表单控件表现为不可编辑（同时控件颜色变灰）。对于输入型控件（如text、textarea）这2个属性都是好用的；但是对于选择型控件（如radio、checkbox）则不然，即时设置了readonly属性，你会发现控件仍然可以变更状态，设置disable虽然能达到不可编辑的目的，但是控件颜色变灰了。

     为了实现最终的显示效果（不可编辑，同时控件颜色不变灰），我们只能特定方法实现了。

 

• 利用透明遮罩层，覆盖在页面最上层。最简单的方法，且不用修改具体代码，用JS写个小插件即可。缺点是无法再选中表单内容。

• 对于radio控件，将其name属性去除使其变为独立控件，由于无法切换状态，达到不可编辑的目的。
• 对于checkbox控件，设置其onclick="return false;"，即禁用了按钮点击事件，达到不可编辑的目的。
• 对于text、textarea控件，设置readonly="readonly"属性即可。