只读（Readonly）与禁用（Disable）的区别与使用

作者：吴晓佩
撰写时间：2019年1月18日
区别：
（1） 表面上可看到的区别就是当这两个词都设置为true时，都为禁用状态，当鼠标移上时使用disable的相关控件时鼠标出现禁用样式，并且不可做任何操作，而Readonly还可以获取文本框里的焦点。
（2） Disable比readonly的使用范围比广，适用文本框、文本域、下拉框、button按钮、单选框…….而readonly只适用于input（text、passwork、textarea）。
（3） Disable设置为true之后是不可以向后台提交数据的，此时可以选择改用readonly进行禁用，或者在提交数据时取消禁用。

如下是我的做法：

1. 先写一个方法。
2. 获取相关控件的ID，如果是禁用就赋值为true，如果要取消禁用就复制为false（有jquery和DOM两种写法，如图有两种写法）
3. 在所需要的操作里调用刚刚写好的方法就可以切换禁用与否的性能了，大量数据一起切换比较灵活，代码如下。

如果想直接把控件禁用或只读的即可在控件后面直接加readonly或disable即可，如下

下图是文本框跟下拉框跟按钮（保存与取消）是常态。

下图是禁用跟只读的状态（下拉框跟button按钮用了disable进行禁用，文本框是用了readonly属性，文本框是只读状态；文本框跟下拉框反灰，按钮颜色变浅）