JavaScriptでdisabledとreadonlyの違いがあまりありません。
表示上はグレーになって、編集は不可能なのがdisabledです。



表示上グレーにならないが、編集は不可能なのがreadonlyです。

<input type="text" name="test1" value="test1" disabled="disabled" />
<input type="text" name="test2" value="test2" readonly="readonly" />

この点からいくと、グレーになるかならないかだけの違いですが、大きく一つ異なる点があります。
formのサブミットでデータが送信されるかされないかです。

属性	サブミット
disabled	される
readonly	されない

以下は、postでtest.htmlにサブミットしています。test.htmlでは受け取っているだけです。
disabledのデータは送信されない為、undefinedのエラーになります。

以下、ソースです。

<form method="post" action="test.html" name="frm" target="_blank">
    <input type="text" name="test1" value="test1" disabled="disabled"/><br />
    <input type="text" name="test2" value="test2" readonly="readonly"/><br />
    <input type="submit" value="送信" />
</form>