jquery - 如何将 "lock"单选按钮、复选框和 <select> 菜单变灰？

Question

我有一个表单，我想以两种状态呈现:

1) 范式

2) Person 可以查看用户填写的表单但不能更改任何内容

使用只读属性很容易处理文本输入，但单选按钮、复选框和下拉菜单不使用它。我可以为它们设置“禁用”属性，但在大多数浏览器中它们显示为灰色并且几乎不可见。我真正想要的是让它们看起来像一个正常的形式，但像禁用元素一样不可点击。有没有办法覆盖正常的“禁用”外观？还是以某种迂回方式处理点击来禁用它们的解决方案？

我正在使用 jQuery 处理大部分内容，如果这很重要的话......

Answer 1

好吧，你可以试试这样的 hack......

​$(':radio:disabled').removeAttr('disabled').click(function(){
    this.checked=false;
})​;

这将选择所有禁用的单选按钮并启用它但是当点击时，不会被选中...

demo

及<select>

你可以这样做，

$('select:disabled').removeAttr('disabled').change(function(){
    $(this).find('option').removeAttr('selected');
    // this.value = this.defaultValue; // you may also try this..
});