一、介紹readonly和disabled作用

readonly和disabled 兩種屬性的寫法，如

<input type="text" name="name"value="xxx” readonly="true"/>
<input type="text"name="name" value="xxx" disabled="true"/>

相同點(diǎn):

如果設(shè)為true。則form屬性不能被編輯、文本框不能輸入文字。

?不同點(diǎn):

1、樣式不同。
? ? ? ? readonly只是使文本框不能輸入，外觀沒有變化。
? ? ? ? disabled會(huì)使文本框變灰。

2、有效范圍不同。
? ? ? ? readonly只針對(duì)input（text / password)和textarea之類可以輸入文本的輸入項(xiàng)有效，disabled對(duì)于所有的表單元素都有效。

3、是否能獲取鼠標(biāo)焦點(diǎn)。
readonly設(shè)為true，用戶不能編輯，但鼠標(biāo)仍然可以聚焦。disabled設(shè)為true，輸入項(xiàng)不能獲取焦點(diǎn)，用戶的所有操作(標(biāo)點(diǎn)擊、鍵盤輸入等)對(duì)該輸入項(xiàng)都無效

4、是否回傳數(shù)據(jù)。
表單元素使用了readonly后，會(huì)將該值傳遞出去，即通過request.getParameter("name"可以得到文本框內(nèi)的內(nèi)容，而表單元素使用了disabled后，當(dāng)我們將表單以POST或GET的方式提交的話，這個(gè)元素的值不會(huì)被傳遞出去，即通過request.getParameter(name”)得不到文本框中的內(nèi)容 (如果有的話)。

二、jquery設(shè)置disabled屬性與移除disabled屬性

//兩種方法設(shè)置disabled屬性

$('#button').attr("disabled",true);

$('#button').attr("disabled","disabled");
//一般來說我比較推薦上面的這種來設(shè)置

//三種方法移除disabled屬性

$('#button').attr("disabled",false);

$('#button').removeAttr("disabled");
//一般來說我比較推薦上面的這種來移除

$('#button').attr("disabled","");

三、當(dāng)要提交表單時(shí)，如果需要disable的屬性值，可以再提交前移除掉disable屬性

• 移除disabled

批量移除含有disabled屬性

 //提交前移除disabled
$('.tbody').find('input, textarea, button,select').removeAttr("disabled");

• readonly

 /*readonly unselectable="on" 該屬性跟disable類似，
    input 元素，不可編輯，不可復(fù)制，不可選擇，不能接收焦點(diǎn)，
    設(shè)置后文字的顏色也會(huì)變成灰色，但是后臺(tái)可以接收到傳值。
*/
  示例：
  <input type="text"  readonly  unselectable="on" >

• select下拉框:

    //加入如下的樣式
    <style>
        select[readonly] {
            background: #eee;
            cursor: no-drop;
        }
        select[readonly] option {
            display: none;
        }
    </style>
    //使用時(shí),加上readonly屬性就行, 但由于有上面的樣式在,所以下拉框是點(diǎn)不動(dòng)
    <select name="" id="" readonly>
        <option value="">1</option>
        <option value="">1</option>
    </select>

• radio單選框:

•  //input框很簡(jiǎn)單直接在點(diǎn)擊時(shí)加上return false,來阻止點(diǎn)擊事件
   <input type="radio" onclick="return false;">蘋果
   <input type="radio" onclick="return false;">榴蓮