readonly與disabled的區別

一. 範圍不同

readonly 只對 <input> 和 <textarea> 標簽有效

disabled 對所有表單元素都有效, 包括：<input>, <textarea>, <button>, <label>, <option>, <select>等

二. 程度不同

readonly 只是將元素設置為只讀，不可輸入，對其它操作沒有影響

disabled 阻止元素的一切操作。包括 獲取焦點，點擊事件等

三. 表單提交

readonly 只是將元素設置為只讀，不影響表單提交

disabled 設置了該屬性的表單元素，值將不會隨著表單一起提交

四. JavaScript操作

設置了readonly和disabled的表單元素，用戶無法再界面上改變它的值。但通過JavaScript是可以改變其值的，同樣背景色，字體顏色等也可以通過JavaScript來改變。

例如：下麵的代碼運行在chrome瀏覽器中時，點擊“點我”後兩個input框的字體顏色、背景色，值都會發生變化。

$('input').attr("readonly","readonly") //將input元素設置為readonly  
$('input').removeAttr("readonly"); //去除input元素的readonly屬性  
 或
$('input').attr("readonly",true)
$('input').attr("readonly",false)
$('input').val ('1')   // 設置input的值
註: 使用表單post或get傳遞時會被傳遞出去

$('input').attr("disabled","disabled") //將input元素設置為readonly  
$('input').removeAttr("disabled"); //去除input元素的readonly屬性  
 或
$('input').attr("disabled",true)
$('input').attr("disabled",false)
$('input').val ('0')   // 設置input的值

註: 使用表單post或get傳遞時不會被傳遞出去