一. 范围不同
     
    
   
    
     
      readonly
     
     只对 <input> 和 <textarea> 标签有效
    
   
    
     
      disabled
     
     对所有表单元素都有效, 包括:
     
      <input>, <textarea>, <button>, <label>, <option>, <select>
     
     
      等
     
    
   
    
     二. 程度不同
    
   
    
     
      readonly
     
     只是将元素设置为只读,不可输入,对其它操作没有影响
    
   
    
     
      disabled
     
     阻止元素的一切操作。包括 获取焦点,点击事件等
    
   
    三. 表单提交
   
    
     
      readonly
     
     只是将元素设置为只读,不影响表单提交
    
   
    
     
      disabled
     
     设置了该属性的表单元素,值将不会随着表单一起提交
    
   
    
     
    
   
    
     四. JavaScript操作
    
   
    
     
      设置了readonly和disabled的表单元素,用户无法再界面上改变它的值。但通过JavaScript是可以改变其值的,同样背景色,字体颜色等也可以通过JavaScript来改变。例如:下面的代码运行在chrome浏览器中时,点击“点我”后两个input框的字体颜色、背景色,值都会发生变化。
     
     
    
   
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        input{
            height:30px;
            width: 200px;
        }
    </style>
</head>
<body>
    <input id="input1" type="text" value="1" readonly="true">
    <input id="input2" type="text" value="2" disabled="true">
    <input type="button" οnclick="test()" value="点我">
    <script>
        function test(){
            var input1 = document.getElementById('input1');
            var input2 = document.getElementById('input2');
            input1.style.cssText = 'color:red;background-color:green'
            input2.style.cssText = 'color:red;background-color:green'
            input1.value = 6;
            input2.value = 6
        }
    </script>
</body>
</html> 
