使用jQuery实现表单重置同时批量修改readonly属性为false的问题

问题原因 #

你现有代码不生效的核心原因是：readonly是作用在 <input>、<select>、<textarea> 这类表单控件元素上的属性，不是作用在 <form> 根标签上的，直接给 form 节点设置 readonly 不会对内部控件生效。

批量修改方案 #

用 jQuery 选中表单内所有表单控件，统一设置属性即可，不需要逐个指定字段：

var form = $('form');
form.trigger("reset");
// 批量匹配所有表单控件，移除只读属性
form.find(':input').prop('readonly', false);

其中 :input 是jQuery内置的选择器，会自动匹配所有 input、select、textarea、button 类的表单元素，不用你逐个列控件类型。

如果想更精准，只修改曾经被设置过只读的元素，可以加属性过滤：

form.find(':input[readonly]').prop('readonly', false);

内容的提问来源于stack exchange，提问作者simpson