关于html元素的disabled,readonly 的详细分析

ReadOnly和Disabled的作用是使用户不能够更改表单域中的内容，但是二者还是有着一些区别的。

一、先看看这两个属性在效果和使用上的区别

1. Readonly只针对input(text/password)和textarea有效，而disabled对于所有的表单元素有效，包括select，radio,checkbox,button等。

2. 在表单元素使用了disabled后，我们将表单以POST或者GET的方式提交的话，disabled的数据是不可以提交到服务器的，而readonly会将该值提交到服务器的。

3. readonly是要锁定这个控件，通过在界面上无法修改他（但是通过javascript可以修改他）。

4. disabled 和readonly有相同的地方也是可以锁定这个控件用户不能改变他的值，但是disabled的更彻底一些，他是要使你完全不能使用他，包括改变他的背景颜色，如果是checkbox则不能选中他。

5. 客户端设置readonly，disabled和服务器端设置readonly效果一样。

二、常用情况：
1、在某个表单中为用户预填了某个唯一识别代码，不允许用户改动，但是在提交时需要传递该值，此时将属性设置为readonly
2、当用户正式提交了表单后需要等待管理员的信息验证，不允许用户再更改表单中的数据，而是只能够查看，由于disabled的作用元素范围大，所以此时应该使用disabled，但同时应该注意的是要将submit button也disabled掉，否则只要用户按了这个按钮，如果在数据库操作页面中没有做完整性检测的话，数据库中的值会被清除。
3、在用户按了提交按钮后，利用javascript将提交按钮disabled掉，可防止在网络条件比较差的环境下，用户反复点击提交按钮导致数据冗余地存入数据库

三、再来看看这两个属性在数据提交方面的区别
我们先来写一个测试代码：

1. <form id="form1" runat="server">
   
2. <div>
   
3. <asp:TextBox ID="txt_Disabled" runat="server" Text="disabled" disabled="disabled" ></asp:TextBox><br />
   
4. <asp:TextBox ID="txt_ReadOnly" runat="server" Text="ReadOnly" ReadOnly="true"></asp:TextBox><br />
   
5. <asp:TextBox ID="txt_Normal" runat="server" Text="normal" ></asp:TextBox><br />
   
6. <asp:Button ID="btn_Test" runat="server" Text="提交数据" onclick="btn_Test_Click" />
   
7. <input type="button" name="btn_ChangeValue" value="改变readonly的值" onclick="document.all('txt_ReadOnly').value = 'myzzb'" />
   
8. </div>
   
9. </form>

复制代码

在这里，我写了一个asp表单页面，使用了get 方式提交


从提交的url可以看出被disabled的控件的值没有提交到服务器，这个时候在服务器端是获取不到这个控件的值的，
相反，被设置成readonly的文本框的值是提交到服务器的。