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傳遞時不會被傳遞出去

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM