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

当元素具有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

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

只读元素是不可编辑的，但在提交时被发送。禁用的元素是不可编辑的，并且在提交时不会发送。另一个不同之处在于，只读元素可以被聚焦(当“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.

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

当表单被清除(重置)时，如果禁用文本框的值需要保留，则必须使用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"的情况下，值将不会被保留