readonly 和 disable 的总结

今天在整理一个EasyUI框架的时候，需要用到设置输入框的disable属性。但是由于EasyUI自身的原因，导致disable属性无法生效，使用readonly就能够正常显示，原因是由于引用的插件validatebox.js导致输入框重新加载时取消了disable属性。

在网上查阅资料发现readonly 和 disable虽然都是禁止编辑，但是也有一些细微的差别。

disabled对于所有的表单元素都有效，但是readonly只针对input(type=text/password)和textarea有效。如果在表单当中，提交表单的话disabled不会被传递，而readonly可以传递到后台。

仔细看了两种属性的区别，发现在日常使用过程中还是有一定的好处：

我们在提交某些表单的时候，有的选项不能够让用户修改，但又需要显示出来的时候，我们就可以把该项设置为readonly

有时候我们开发好一个表单后，对于权限较高的用户来说可以查看和修改表单里面的数据，而对于一部分用户来我，我们往往只希望他拥有查看的权限就够了，这时候我们就可以把整个表单设置为disable，如$(“#fm”).form(“disable”);然后配合把提交按钮也隐掉就能完美实现了。

使用disable还可以防止用户多次提交。

另外还有一个细小的差别就是设置为readonly的元素可以获得光标的焦点，而disable不行。