点击编辑按钮移除多个表单字段readonly属性的问题排查

问题根源 #

你当前用的document.querySelector()只会抓取第一个匹配的元素，所以不管选单个id、class还是input标签，都只能修改第一个输入框的readonly状态。要一次性处理所有目标输入框，得用document.querySelectorAll()获取全部匹配元素，再逐个操作。

修正后的核心代码 #

把你的脚本替换成这段：

const editButton = document.querySelector('#removeAttribute');
// 用class选择器获取所有需要编辑的输入框，也可以用'form input'选中表单内所有输入框
const inputFields = document.querySelectorAll('.inputField');

editButton.addEventListener('click', () => {
  // 遍历每个输入框，移除readonly属性
  inputFields.forEach(field => field.removeAttribute('readonly'));
});

进阶优化：支持编辑/只读切换 #

如果需要点击按钮能来回切换编辑和只读状态，用这段代码更实用：

const editButton = document.querySelector('#removeAttribute');
const inputFields = document.querySelectorAll('.inputField');

editButton.addEventListener('click', () => {
  inputFields.forEach(field => {
    // 切换readonly状态
    field.readOnly = !field.readOnly;
    // 同步修改按钮文字，让用户更清楚当前状态
    editButton.textContent = field.readOnly ? 'Edit' : 'Cancel';
  });
});

完整可运行代码 #

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Edit Test Form</title>
</head>
<body>

<button id="removeAttribute" name="editBtn">Edit</button><br><br>

<form action="" method="POST">
  <label>Name:</label><br>
  <input type="text" id="name" class="inputField" name="name" value="John Smith" readonly><br><br>
    
  <label>Phone:</label><br>
  <input type="tel" id="phone" class="inputField" name="phone" value="555-555-5555" readonly><br><br>
    
  <label>Email:</label><br>
  <input type="email" id="email" class="inputField" name="email" value="jsmith@email.com" readonly><br><br>

  <button type="submit" name="submit">Submit</button>
</form>

<script>
const editButton = document.querySelector('#removeAttribute');
const inputFields = document.querySelectorAll('.inputField');

editButton.addEventListener('click', () => {
  inputFields.forEach(field => field.removeAttribute('readonly'));
});
</script>
</body>
</html>

（注：顺便把phone类型改成了标准的tel类型，更符合HTML规范）

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