input/select/textarea标签的readonly效果实现

首先说一下readonly属性的应用场景

表单中，不能编辑对应的文本，但是仍然可以聚焦焦点

在提交表单的时候，该输入项会作为form的一项提交（目的）

这里要说一下disabled和readonly的不同，如果一个输入项的disabled设为true，则该表单输入项不能获取焦点，用户的所有操作（鼠标点击和键盘输入等）对该输入项都无效，最重要的一点是当提交表单时，这个表单输入项将不会被提交。

input标签实现readonly效果

input标签需要readonly效果的，通常是type=text/checkbox/radio，下面一一介绍这三种类型的readonly效果实现。

<!-- input标签type=text的readonly效果实现 -->
<input type="text" readonly="readonly" value="readonly" />

<!-- input标签type=checkbox的readonly效果实现 -->
<input type="checkbox" name="checkbox1" value="checkbox1" id="red" checked="checked" />
<label for="red">红色</label>
<input type="checkbox" name="checkbox2" value="checkbox2" id="color" />
<label for="color">颜色</label>
<script>
//JS实现readonly效果
$('input[type="checkbox"]').bind("click", function(){
this.checked = !this.checked;
});
</script>

<!-- input标签type=radio的readonly效果实现 -->
<input type="radio" name="radio" value="radio1" id="red" checked="checked" />
<label for="red">红色</label>
<input type="radio" name="radio" value="radio2" id="blue" />
<label for="blue">蓝色</label>
<script>
//JS实现readonly效果
$('input[type="radio"]').each(function(){
if($(this).attr("checked") != "checked"){
$(this).attr("disabled", true);
}
});
</script>

textarea标签实现readonly效果

<!-- textarea标签的readonly效果实现 -->
<textarea readonly="readonly">不可编辑</textarea>

select标签实现readonly效果

<!-- select标签readonly效果实现 -->
<select name="readonly">
<option value="red" selected="selected">red</option>
<option value="green">green</option>
<option value="blue">blue</option>
</select>
<script>
//JS实现readonly效果
$('select').focus(function(){
this.defaultIndex = this.selectedIndex;
});

$('select').change(function(){
this.selectedIndex = this.defaultIndex;
});
</script>

如果值是固定的话，传输参数也可以通过设置隐藏域实现，让原本显示的disabled为true就行，如：

<!-- 设置隐藏域，传输数据 -->
<input type="hidden" name="hide" value="hide" />
<input type="text" name="hide" value="hide" disabled="disabled">

readonly的展示效果没disabled好，disabled让用户知道这是不可编辑的，而readonly会给用户一种错觉。