基于Checkbox控制HTML输入框只读/可编辑的实现方案及代码示例

嘿，这个需求我之前也做过，其实核心就是监听复选框的状态变化，然后动态修改输入框的readonly属性就行。下面给你两种实用的实现方案，包含完整代码示例：

方案1：单个输入框的基础实现 #

如果只是单个输入框和复选框的组合，直接绑定元素监听事件就足够简单：

HTML 结构 #

<div class="input-group">
  <label>
    <input type="checkbox" id="editToggle"> 允许编辑输入框
  </label>
  <input type="text" id="targetInput" value="默认内容" readonly>
</div>

JavaScript 逻辑 #

// 获取对应的DOM元素
const toggleCheckbox = document.getElementById('editToggle');
const targetInput = document.getElementById('targetInput');

// 监听复选框的状态变化事件
toggleCheckbox.addEventListener('change', function() {
  // 根据复选框的勾选状态，反向设置输入框的readonly属性
  // 勾选时：readOnly = false（可编辑）；取消勾选时：readOnly = true（只读）
  targetInput.readOnly = !this.checked;
  
  // 可选需求：如果取消勾选时需要清空输入框，可添加这行代码
  // if (!this.checked) targetInput.value = '';
});

方案2：多个输入框的批量处理（事件委托） #

如果页面上有很多组这样的复选框+输入框组合，用事件委托会更高效，不用给每个复选框单独绑定监听：

HTML 结构 #

<div class="input-group">
  <label>
    <input type="checkbox" data-target="input1"> 编辑输入框1
  </label>
  <input type="text" id="input1" value="输入框1内容" readonly>
</div>

<div class="input-group">
  <label>
    <input type="checkbox" data-target="input2"> 编辑输入框2
  </label>
  <input type="text" id="input2" value="输入框2内容" readonly>
</div>

JavaScript 逻辑 #

// 给父容器（这里用document，你也可以用更具体的容器元素）添加事件委托
document.addEventListener('change', function(e) {
  // 判断触发事件的是不是我们的目标复选框
  if (e.target.type === 'checkbox' && e.target.hasAttribute('data-target')) {
    const targetInputId = e.target.getAttribute('data-target');
    const targetInput = document.getElementById(targetInputId);
    
    // 确保找到对应的输入框后再修改属性
    if (targetInput) {
      targetInput.readOnly = !e.target.checked;
    }
  }
});

额外优化：配合CSS增强视觉反馈 #

为了让用户更直观地感知输入框的只读状态，可以添加CSS样式：

input[readonly] {
  background-color: #f0f0f0;
  cursor: not-allowed;
  border-color: #ddd;
}

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