只读元素是不可编辑的，但在提交时被发送。禁用的元素是不可编辑的，并且在提交时不会发送。另一个不同之处在于，只读元素可以被聚焦(当“tab”通过表单时也可以被聚焦)，而禁用元素则不能。

阅读这篇很棒的文章或w3c的定义。引用其中重要的部分:

Key Differences The Disabled attribute Values for disabled form elements are not passed to the processor method. The W3C calls this a successful element.(This works similar to form check boxes that are not checked.) Some browsers may override or provide default styling for disabled form elements. (Gray out or emboss text) Internet Explorer 5.5 is particularly nasty about this. Disabled form elements do not receive focus. Disabled form elements are skipped in tabbing navigation. The Read Only Attribute Not all form elements have a readonly attribute. Most notable, the <SELECT> , <OPTION> , and <BUTTON> elements do not have readonly attributes (although they both have disabled attributes) Browsers provide no default overridden visual feedback that the form element is read only. (This can be a problem… see below.) Form elements with the readonly attribute set will get passed to the form processor. Read only form elements can receive the focus Read only form elements are included in tabbed navigation.

禁用意味着在提交表单时不会提交来自该表单元素的数据。只读意味着元素内的任何数据都将被提交，但用户不能更改它。

例如:

<input type="text" name="yourname" value="Bob" readonly="readonly" />

这将为元素“yourname”提交值“Bob”。

<input type="text" name="yourname" value="Bob" disabled="disabled" />

这将不会为元素“yourname”提交任何内容。

与其他答案相同(disabled不会发送到服务器，readonly会)，但一些浏览器阻止高亮显示禁用的表单，而read-only仍然可以高亮显示(并复制)。

http://www.w3schools.com/tags/att_input_disabled.asp

http://www.w3schools.com/tags/att_input_readonly.asp

只读字段不能被修改。但是，用户可以选择它，突出显示它，并从中复制文本。

当元素具有disabled属性时，不会触发任何事件。

下面这些都不会被触发。

$("[disabled]").click( function(){ console.log("clicked") });//No Impact
$("[disabled]").hover( function(){ console.log("hovered") });//No Impact
$("[disabled]").dblclick( function(){ console.log("double clicked") });//No Impact

而readonly将被触发。

$("[readonly]").click( function(){ console.log("clicked") });//log - clicked
$("[readonly]").hover( function(){ console.log("hovered") });//log - hovered
$("[readonly]").dblclick( function(){ console.log("double clicked") });//log - double clicked

当表单被清除(重置)时，如果禁用文本框的值需要保留，则必须使用disabled = "disabled"，因为只读文本框将不会保留该值

例如:

HTML

文本框

<input type="text" id="disabledText" name="randombox" value="demo" disabled="disabled" />

重置按钮

<button type="reset" id="clearButton">Clear</button>

在上面的例子中，当按下Clear按钮时，禁用的文本值将保留在表单中。在input type =" text" readonly="readonly"的情况下，值将不会被保留

可以设置readonly属性以防止用户更改值，直到满足其他一些条件，而可以设置disabled属性以防止用户使用元素

disabled和readonly之间的区别是只读控件仍然可以工作，仍然是可聚焦的，而disabled控件不能接收焦点，也不能与表单一起提交