html标签的属性——disabled与readonly区别

一、介绍readonly和disabled作用

readonly和disabled 两种属性的写法，如

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

相同点:

如果设为true。则form属性不能被编辑、文本框不能输入文字。

 不同点:

1、样式不同。
        readonly只是使文本框不能输入，外观没有变化。
        disabled会使文本框变灰。

2、有效范围不同。
        readonly只针对input（text / password)和textarea之类可以输入文本的输入项有效，disabled对于所有的表单元素都有效。

3、是否能获取鼠标焦点。
readonly设为true，用户不能编辑，但鼠标仍然可以聚焦。disabled设为true，输入项不能获取焦点，用户的所有操作(标点击、键盘输入等)对该输入项都无效

4、是否回传数据。
表单元素使用了readonly后，会将该值传递出去，即通过request.getParameter("name"可以得到文本框内的内容，而表单元素使用了disabled后，当我们将表单以POST或GET的方式提交的话，这个元素的值不会被传递出去，即通过request.getParameter(name”)得不到文本框中的内容 (如果有的话)。

二、jquery设置disabled属性与移除disabled属性

//两种方法设置disabled属性

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

$('#button').attr("disabled","disabled");
//一般来说我比较推荐上面的这种来设置

//三种方法移除disabled属性

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

$('#button').removeAttr("disabled");
//一般来说我比较推荐上面的这种来移除

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

三、当要提交表单时，如果需要disable的属性值，可以再提交前移除掉disable属性

• 移除disabled

批量移除含有disabled属性

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

• readonly

 /*readonly unselectable="on" 该属性跟disable类似，
    input 元素，不可编辑，不可复制，不可选择，不能接收焦点，
    设置后文字的颜色也会变成灰色，但是后台可以接收到传值。
*/
  示例：
  <input type="text"  readonly  unselectable="on" >

• select下拉框:

    //加入如下的样式
    <style>
        select[readonly] {
            background: #eee;
            cursor: no-drop;
        }
        select[readonly] option {
            display: none;
        }
    </style>
    //使用时,加上readonly属性就行, 但由于有上面的样式在,所以下拉框是点不动
    <select name="" id="" readonly>
        <option value="">1</option>
        <option value="">1</option>
    </select>

• radio单选框:

•  //input框很简单直接在点击时加上return false,来阻止点击事件
   <input type="radio" onclick="return false;">苹果
   <input type="radio" onclick="return false;">榴莲