關於html元素disabled和readonly的介紹
阿新 • • 發佈：2019-01-23
1、兩個屬性的外觀區別。
2、readonly和disabled可以鎖定控制元件，在介面上無法修改元素的值(但是通過javascript可以修改)。
3、基本上所有的元素都有disabled屬性，但是不一定有readonly屬性，比如select。
4、點選被readonly掉的按鈕照樣可以觸發事件，但是被disabled掉的按鈕就無法使用了不管上面有沒有事件。
5、readonly的資料是可以提交到伺服器的，disabled的資料是無法提交到伺服器的。
從提交的url可以看出設定readonly元素值可以提交到伺服器，但是設定disabled元素值無法提交到伺服器。
示例程式碼：
<html> <head> <meta charset="utf-8" /> <title> 關於html元素的disabled,readonly 的詳細分析 </title> </head> <body> <form method="get" action="test.php"> readonly：<input id="readonly" name="readonly" type="text" readonly="readonly" value="我被設定成了readonly" style="width:300px;" /> <input type="button" value="修改readonly框的值" onclick="edit('readonly', '哈哈，我能修改設定了readonly屬性元素的值')" readonly="readonly" /> <br /> disabled：<input id="disabled" name="disabled" type="text" disabled="disabled" value="我被設定成了disabled" style="width:300px;" /> <input type="button" value="修改disabled框的值" onclick="edit('disabled', '哈哈，我能修改設定了disabled屬性元素的值')" disabled="disabled" /> <br /> <input type="submit" value="提交" /> </form> <script type="text/javascript"> function edit(id, value){ document.getElementById(id).value = value; } </script> </body> </html>