在html中input的屬性readonly和disabled讓很多用戶都覺得是一樣的，下面我來給大家介紹readonly和disabled區別，有需要了解的朋友可參考。
先看input的屬性定義：
屬性 值 描述
disabled disabled 當 input 元素首次加載時禁用此元素，這樣用戶就無法在其中寫文本，或選定它。
注釋：不能與 type="hidden" 一同使用。
readonly readonly 指示此域的值不能被修改。
注釋：僅可與 type="text" 配合使用。
另外我再看看這兩個區別，先看代碼：
readonly代碼:<input type="text" name="readonly" readonly="readonly" />
readonly不可編輯，可復制，可選擇,可以接收焦點但不能被修改，後台會接收到傳值.
disabled代碼: <input type="text" name="disabled" disabled="disabled" />
disabled不可編輯，不可復制，不可選擇，不能接收焦點,後台也不會接收到傳值
我們常常在用戶按了提交按鈕後，利用javascript將提交按鈕disabled掉，這樣可以防止網絡條件比較差的環境下，用戶反復點提交按鈕導致數據冗余地存入數據庫。
disabled和readonly這兩個屬性有一些共同之處，比如都設為true，則form屬性將不能被編輯，往往在寫js代碼的時候容易混合使用這兩個屬性，其實他們之間是有一定區別的。
如果一個輸入項的disabled設為true，則該表單輸入項不能獲取焦點，用戶的所有操作（鼠標點擊和鍵盤輸入等）對該輸入項都無效，最重要的一點是當提交表單時，這個表單輸入項將不會被提交。
而readonly只是針對文本輸入框這類可以輸入文本的輸入項，如果設為true，用戶只是不能編輯對應的文本，但是仍然可以聚焦焦點，並且在提交表單的時候，該輸入項會作為form的一項提交。
代碼如下 復制代碼<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<form id="form1" name="form1" method="get" action="">
<input name="q1" type="text" id="q1" value="readonly" readonly="true" />
<input name="q2" type="text" disabled="disabled" id="q2" value="disabled" />
<input type="submit" name="Submit" value="Submit" />
</form>
</body>
</html>
小技巧：
diabled:可用readonly代替，background-color:#cccccc;加上灰色背景色就可以
代碼如下 復制代碼<input id="mytext" type="text" value="我是不能用的">
<input type="button" value="disabled" onClick="javascript: document.all.mytext.disabled='false'">
<input type="button" value="enable" onClick="javascript: document.all.mytext.removeAttribute('disabled')">
注意：document.all.mytext.disabled=true；表單控件不能用
document.all.mytext.disabled=false；表單控件能用
代碼如下 復制代碼<input id="mytext" type="text" value="我是能用的">
<input type="button" value="disable" onClick="if (mytext.disabled==false){ mytext.disabled=true;mytext.value='我是不能用的';this.value='enable'} else { mytext.disabled=false;mytext.value='我是能用的';this.value='disable'}">
jquery設置元素的readonly和disabled
1、readonly
代碼如下 復制代碼
$('input').attr("readonly","readonly")//將input元素設置為readonly
$('input').removeAttr("readonly");//去除input元素的readonly屬性
if($('input').attr("readonly")==true)//判斷input元素是否已經設置了readonly屬性
對於為元素設置readonly屬性和取消readonly屬性的方法還有如下兩種：
$('input').attr("readonly",true)//將input元素設置為readonly
$('input').attr("readonly",false)//去除input元素的readonly屬性
$('input').attr("readonly","readonly")//將input元素設置為readonly
$('input').attr("readonly","")//去除input元素的readonly屬性
2、disabled
代碼如下 復制代碼$('input').attr("disabled","disabled")//將input元素設置為disabled
$('input').removeAttr("disabled");//去除input元素的disabled屬性
if($('input').attr("disabled")==true)//判斷input元素是否已經設置了disabled屬性
對於為元素設置disabled屬性和取消disabled屬性的方法還有如下兩種：
$('input').attr("disabled",true)//將input元素設置為disabled
$('input').attr("disabled",false)//去除input元素的disabled屬性
$('input').attr("disabled","disabled")//將input元素設置為disabled
$('input').attr("disabled","")//去除input元素的disabled屬性
去除屬性推薦使用removeAttr()這種方式，新版本jquery會不支持attr("readonly","")這種寫法