JavaScript 函数仅适用于具有类名称的第一个元素，不适用于具有该类的所有元素

Question

我在一页上有多个结构相同的表单。

它们都有一个包含“onchange”事件的文件输入字段，当选择文件时，该事件会从我的提交按钮中删除“禁用”属性。

问题是，我的函数仅适用于具有该类名称的第一个元素。我怎样才能让它适用于该类的每个项目？

index.php:

<form class="form">
    <input type="file" name="image" onchange="unlock();">
    <input type="text" name="title" placeholder="Image title"/>
    <input type="submit" value="Add image" class="submit" disabled/>
</form>

<form class="form">
    <input type="file" name="image" onchange="unlock();">
    <input type="text" name="title" placeholder="Image title"/>
    <input type="submit" value="Add image" class="submit" disabled/>
</form>

脚本.js:

function unlock() {
    document.querySelector('.submit').removeAttribute("disabled");
}

感谢任何帮助!

Answer 1

1. 使用事件监听器
2. 使用选择器进行相对寻址
3. 养成永远不要在表单中调用任何提交的习惯

document.querySelectorAll("[name=image]").forEach(
    ele => ele.addEventListener("change",
      (e) => e.target.closest(".form").querySelector(".sub").disabled = false
    )      
);      

<form class="form">
  <input type="file" name="image">
  <input type="text" name="title" placeholder="Image title" />
  <input type="submit" value="Add image" class="sub" disabled/>
</form>

<form class="form">
  <input type="file" name="image">
  <input type="text" name="title" placeholder="Image title" />
  <input type="submit" value="Add image" class="sub" disabled/>
</form>

更兼容的版本

[...document.querySelectorAll("[name=image]")].forEach(function(ele) {
  ele.addEventListener("change",
    function(e) {
      e.target.parentNode.querySelector(".sub").disabled = false;
    })
});

<form class="form">
  <input type="file" name="image">
  <input type="text" name="title" placeholder="Image title" />
  <input type="submit" value="Add image" class="sub" disabled/>
</form>

<form class="form">
  <input type="file" name="image">
  <input type="text" name="title" placeholder="Image title" />
  <input type="submit" value="Add image" class="sub" disabled/>
</form>