设置或解除input元素的只读属性，核心是操作HTML的readonly属性或DOM的readOnly属性，常用方法包括原生JavaScript直接赋值和jQuery的prop方法，具体选择取决于技术栈和对浏览器兼容性的要求。
input只读属性怎么解除？直接操作DOM属性
解除input只读属性最直接的方式是操作DOM属性，在HTML中，readonly属性是一个布尔属性，只要存在即表示只读，在JavaScript中，对应的DOM属性是readOnly,需要区分大小写。
使用JavaScript设置只读属性
设置input只读时，可以直接给DOM元素添加readonly属性,原生JS有两种常见写法：
- 设置readOnly属性为true：
element.readOnly = true - 设置readonly属性值（任意值）：
element.setAttribute('readonly', 'readonly')
第一种写法更推荐，因为直接操作DOM属性性能更好，且符合布尔属性的语义,第二种写法适合需要与HTML标记保持一致的情况。
使用JavaScript解除只读属性
解除只读同样有两种方式：
- 将readOnly属性设为false：
element.readOnly = false - 移除readonly属性：
element.removeAttribute('readonly')
两种方式效果相同，但removeAttribute会彻底移除属性，而readOnly = false只是将属性值设为假，但属性本身可能仍然存在（若之前通过setAttribute添加）。多数情况下，使用readOnly = false更简洁，且不会遗留空属性。
常见误区：readonly与disabled的区别
很多开发者容易混淆只读与禁用,两者在表现和数据提交上有本质区别：
- readonly不可编辑，但可以聚焦、选中、复制,且表单提交时仍会发送该字段的值。
- disabled：元素完全不可交互，包括聚焦、选中、点击,且表单提交时不会发送该字段的值。
行业共识认为，如果你需要用户看到字段但不可修改，同时希望数据提交，应使用readonly；如果你希望字段完全不可用且不提交数据，则使用disabled，在解除只读属性时,注意不要误操作成禁用属性。
设置input只读属性的js方法：jQuery的prop与attr
在jQuery项目中，控制只读属性通常使用prop方法，偶尔也会用到attr,两者的行为差异需要特别注意。
prop方法设置与解除只读属性
jQuery的prop方法专门用于操作DOM属性,对布尔属性有良好支持：
- 设置只读：
$('#input').prop('readonly', true) - 解除只读：
$('#input').prop('readonly', false)
prop方法直接操作DOM的readOnly属性，兼容所有现代浏览器，且语义清晰，业内专家指出，在jQuery 1.6+版本中，prop是处理checked、disabled、readonly等布尔属性的标准方式。
attr方法的正确用法与局限
attr方法操作的是HTML属性，而不是DOM属性,使用时需注意：
- 设置只读：
$('#input').attr('readonly', 'readonly') - 解除只读：
$('#input').removeAttr('readonly')
attr方法在早期jQuery版本中常用，但存在一些边缘情况，如果readonly属性初始不存在，用attr设置后再用prop解除可能不彻底。实际开发中，建议优先使用prop，仅在需要保持HTML标记一致时使用attr。
对比两种方法：
| 场景 | prop方法 | attr方法 |
|---|---|---|
| 设置只读 | prop('readonly', true) |
attr('readonly', 'readonly') |
| 解除只读 | prop('readonly', false) |
removeAttr('readonly') |
| 适用版本 | jQuery 1.6+ 推荐 | 所有版本，但1.6+后不推荐用于布尔属性 |
| 性能 | 稍快（直接操作DOM属性） | 稍慢（需解析属性字符串） |
input框只读属性取消的常见场景及操作
在实际项目中，需要动态设置或解除input只读属性的场景相当普遍,以下列举几个典型场景及具体操作。
表单提交时动态控制只读
在数据提交前，有时需要将某些字段临时设为只读，防止用户修改关键信息，例如在订单确认页面,用户确认后所有输入框变为只读。
操作步骤：
- 获取表单中所有需要设置的input元素
- 遍历每次元素，设置readOnly为true
- 提交后如需修改，再解除只读
// 设置所有input为只读
document.querySelectorAll('#orderForm input').forEach(function(el) {
el.readOnly = true
})
// 解除只读
document.querySelectorAll('#orderForm input').forEach(function(el) {
el.readOnly = false
})
根据用户权限设置只读
在管理系统或协作平台中，不同用户角色对字段的编辑权限不同,只读属性常用于实现权限控制。
具体实现：
- 管理员：所有字段可编辑（不设置只读）
- 普通用户：部分字段只读（如审核状态、创建时间等）
var userRole = '普通用户'
if (userRole === '普通用户') {
document.getElementById('statusInput').readOnly = true
document.getElementById('timeInput').readOnly = true
}
批量操作多表单元素的只读属性
当页面存在多个input，且需要统一设置或解除只读时,可以借助类名或数据属性来精准选择。
推荐做法：
- 给需要动态控制只读的input添加类名，如
data-editable - 通过类名或属性选择器批量操作
// 批量设置只读
var inputs = document.querySelectorAll('input[data-editable]')
for (var i = 0; i < inputs.length; i++) {
inputs[i].readOnly = true
}
// 批量解除只读
for (var j = 0; j < inputs.length; j++) {
inputs[j].readOnly = false
}
Q&A：input只读属性设置与解除常见问题
input只读属性怎么解除？
解除input只读属性，原生JS将readOnly属性设为false，或使用removeAttribute('readonly')，jQuery中调用prop('readonly', false)，如果使用attr方法设置过，则需要用removeAttr('readonly')，建议优先使用DOM属性操作,兼容性更好。
设置input只读属性后表单字段还能提交吗？
能，只读字段仍然会随表单提交，数据会被发送到服务器，这是readonly与disabled的核心区别之一，如果你希望字段不提交数据,应使用disabled属性而不是readonly。
readonly属性与disabled属性在数据提交上有何不同？
readonly字段提交数据，disabled字段不提交数据，readonly字段可聚焦、可选中、可复制，disabled字段完全不可交互，禁用属性会触发浏览器默认样式（灰色文字），而只读属性通常无特殊样式,需要开发者自行添加CSS区分。
首发原创文章，作者：王坚，如若转载，请注明出处：https://test.idctop.com/article/558863.html
