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

Question

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

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

问题是，我的函数仅适用于具有该类名的第一个元素。如何使其适用于该类的每个项目？

索引.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. 使用 eventListener
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>

Answer 2

为所有提交按钮提供 ID，并在 unlock(( 函数中传递相应的 ID。

这会从提交中删除禁用的内容

function unlock(form_id) {
document.getElementById(form_id).removeAttribute("disabled");
}

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