在表单交互设计中，通过复选框动态切换输入框的只读状态是一种提升用户体验的常见做法。例如，某些编辑页面会提供一个“启用编辑”复选框，只有勾选后输入框才允许用户输入内容，否则保持只读。实现这一功能只需几步：准备HTML结构，监听复选框的change事件，然后根据复选框的选中状态修改目标输入框的readOnly属性。
理解readOnly与disabled的区别
在开始编码前，必须区分readOnly和disabled这两个属性：
- readOnly：输入框内容不能被用户修改，但可以获得焦点，样式不变，提交时数据会被发送。
- disabled：输入框完全不可用，无法获得焦点，样式通常变灰，提交时数据不会被发送。
如果需求是“只能看不能改但数据仍需提交”，应使用readOnly。反之，如果需要彻底禁用输入并阻止提交，则用disabled。本文重点演示readOnly的控制。
基础HTML结构
首先创建一个复选框和一个文本输入框，并用label建立关联，提升可访问性。
<form>
<label>
<input type="checkbox" id="toggleReadonly">
启用编辑
</label>
<br>
<label for="username">用户名：</label>
<input type="text" id="username" value="默认只读" readonly>
</form>这里初始将输入框设置为readonly，复选框默认未选中，符合“勾选后才能编辑”的逻辑。
JavaScript实现动态控制
核心逻辑：获取复选框和输入框的DOM引用，监听复选框的change事件，在事件处理函数中根据checked值设置输入框的readOnly属性。
// 获取元素
const checkbox = document.getElementById('toggleReadonly');
const input = document.getElementById('username');
// 监听复选框状态变化
checkbox.addEventListener('change', function() {
// 勾选时去掉只读（可编辑），取消勾选时设为只读
input.readOnly = !this.checked;
});注意：将事件绑定在change上，而不是click，因为change在值变化后才触发，更适合表单控件状态监控。如果要更精细的控制，也可以使用click，但change是更标准的选择。
完整可运行示例
下面是一个可直接粘贴到HTML文件中测试的完整代码，包含必要的样式优化。注意代码中的特殊字符已做转义处理。
<!DOCTYPE html>
<html lang="zh-CN">
<head>
&meta charset="UTF-8">
<title>动态控制输入框只读状态</title>
<style>
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 30px; }
.container { max-width: 400px; margin: 0 auto; padding: 20px; border: 1px solid #ccc; border-radius: 8px; background: #f9f9f9; }
label { display: block; margin: 10px 0; }
input[type="text"] { width: 100%; padding: 8px; border: 1px solid #aaa; border-radius: 4px; }
input[type="text"]:focus { outline: 2px solid #4A90D9; }
.note { font-size: 0.9em; color: #666; margin-top: 15px; }
</style>
</head>
<body>
<div class="container">
<form>
<label>
<input type="checkbox" id="toggleReadonly">
启用编辑
</label>
<label for="username">用户名：</label>
<input type="text" id="username" value="默认只读" readonly>
<p class="note">提示：勾选复选框后输入框变为可编辑状态。</p>
</form>
</div>
<script>
const checkbox = document.getElementById('toggleReadonly');
const input = document.getElementById('username');
checkbox.addEventListener('change', function() {
input.readOnly = !this.checked;
});
</script>
</body>
</html>进阶：同时控制多个输入框
有些场景需要一组输入框都受同一个复选框控制。方法类似，只需将选择器改为类名或遍历多个元素。
// 假设多个输入框都有 class="editable-field"
const inputs = document.querySelectorAll('.editable-field');
checkbox.addEventListener('change', function() {
const isEditable = this.checked;
inputs.forEach(function(inp) {
inp.readOnly = !isEditable;
});
});注意事项
- 事件绑定时机：一定要在DOM加载完成后再绑定，否则可能找不到元素。如果脚本位于文档底部（如上例），则安全；若在<head>中，需包裹在
DOMContentLoaded或window.onload里。 - 属性值与布尔值：
readOnly是布尔属性，在JavaScript中设置true或false即可。注意不要写成字符串"true"，否则所有非空字符串都会被解析为true，导致逻辑错误。 - 与表单提交的关系：
readOnly的输入框依然会提交数据，如果有保密或验证需求，需配合后端处理。
通过以上步骤，你可以轻松实现“复选框控制输入框只读状态”的交互效果。这个模式广泛应用于权限设置、条款确认、临时编辑等场景，是前端交互中的基础技能。掌握它之后，你可以进一步扩展到控制disabled属性，或者结合CSS类改变样式，打造更丰富的表单交互体验。
JavaScript动态控制输入框只读复选框onchangereadOnly属性表单交互修改时间：2026-06-08 17:48:32