单页多表单独立移除readonly与disabled属性的实现方案

问题背景 #

现有代码会移除页面所有表单字段的readonly和disabled属性，无法实现点击单个表单的编辑按钮时，仅解锁当前表单内字段的需求。当前页面包含两个表单form_1、form_2，对应编辑按钮editBtn_1、editBtn_2。

可行方案 #

方案1：基于ID关联匹配（适配现有命名规则） #

利用按钮ID与表单ID的对应关系（如editBtn_X对应form_X），点击按钮时锁定对应表单内的字段处理：

// 绑定所有以editBtn_开头的按钮
document.querySelectorAll('[id^="editBtn_"]').forEach(btn => {
  btn.addEventListener('click', () => {
    // 从按钮ID提取对应表单ID
    const formId = btn.id.replace('editBtn_', 'form_');
    const targetForm = document.getElementById(formId);
    // 仅获取当前表单内的输入/选择/文本域元素
    const fields = targetForm.querySelectorAll('input, textarea, select');
    fields.forEach(field => {
      field.removeAttribute('readonly');
      field.removeAttribute('disabled');
    });
  });
});

原HTML无需修改，直接使用即可。

方案2：利用DOM层级关系（无需依赖ID命名） #

编辑按钮本身在对应表单内部，直接通过按钮的父级表单元素定位，代码更简洁：

document.querySelectorAll('[id^="editBtn_"]').forEach(btn => {
  btn.addEventListener('click', () => {
    // 找到按钮所在的最近表单元素
    const targetForm = btn.closest('form');
    const fields = targetForm.querySelectorAll('input, textarea, select');
    fields.forEach(field => {
      field.removeAttribute('readonly');
      field.removeAttribute('disabled');
    });
  });
});

方案3：统一类名批量处理（更适合扩展多表单） #

给所有编辑按钮和表单添加统一类名，新增表单时无需修改JS代码：

修改后的HTML（添加类名）

<h2>Form One</h2>

<form id="form_1" class="editable-form" action="nextPage_1.php" method="POST">
  <input type="text" name="dataField_A" readonly /><br /><br />

  <input type="text" name="dataField_B" readonly /><br /><br />

  <button form="none" id="editBtn_1" class="form-edit-btn" name="editBtn_1">Edit</button>

  <button type="submit" form="form_1" id="form_1_Btn" name="form_1_Btn">
        Submit
      </button>
</form>
<br />

<h2>Form Two</h2>

<form id="form_2" class="editable-form" action="nextPage_2.php" method="POST">
  <input type="text" name="dataField_C" readonly /><br /><br />

  <select name="dataSelect_D" disabled>
    <option value="D1">D1</option>
    <option value="D2">D2</option>
    <option value="D3">D3</option>
  </select><br /><br />

  <textarea name="textarea_E" readonly></textarea><br /><br />

  <button form="none" id="editBtn_2" class="form-edit-btn" name="editBtn_2">Edit</button>

  <button type="submit" form="form_2" id="form_2_Btn" name="form_2_Btn">
        Submit
      </button>
</form>
<br />

对应的JavaScript

document.querySelectorAll('.form-edit-btn').forEach(btn => {
  btn.addEventListener('click', () => {
    const targetForm = btn.closest('.editable-form');
    const fields = targetForm.querySelectorAll('input, textarea, select');
    fields.forEach(field => {
      field.removeAttribute('readonly');
      field.removeAttribute('disabled');
    });
  });
});

关键说明 #

• 核心逻辑是缩小元素选择范围：不再选取页面所有字段，仅处理当前按钮对应表单内的字段。
• closest('form')方法可快速定位按钮所在的最近表单，比ID匹配更灵活。
• 批量绑定事件的方式避免重复代码，方案3新增表单时只需添加对应类名即可自动生效。

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