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

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

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

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

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>

感谢您的帮助

使用eventListener

使用选择器相对寻址

养成一种习惯，永远不要在表格中要求任何东西提交

document.querySelectorAll（“[name=image]”）。forEach(
ele=>ele.addEventListener（“更改”，
（e） =>e.target.closest（“.form”）.querySelector（“.sub”）.disabled=false
)      
);      
为所有提交按钮提供ID，并在unlock（）函数中传递相应的ID

这将从提交中删除禁用的


功能解锁（表单id）{
getElementById（form_id）.removeAttribute（“禁用”）；
}

OP编写的脚本根本不起作用
.getElementsByClassName（）
返回节点列表，而不是元素。你必须显式地迭代列表来操作元素。我编辑了我的问题，那里的脚本有点错误。我有querySelector，在这种情况下，只有类为submit的第一个元素才能正常工作。
querySelector
的明确目的是只返回第一个匹配的元素。（你应该去阅读你使用的方法的实际用途，而不是假设某件事，然后如果它的行为不同，你会感到惊讶。）你想要querySelectorAll，然后正如前面提到的，你需要在结果列表中的项目上循环。查找它
querySelector
vs
querySelectorAll
实际上，如果图像标题也被禁用，它将不起作用。因此，从表单中删除已禁用，只会从“提交”按钮中删除它。这不是很明显，我个人也不会这样做。如果浏览器兼容性是一个案例，您可以使用“function”而不是“=>”（箭头函数），例如：document.queryselectoral（“[name=image]”）。forEach（function（ele）{ele.addEventListener（“change”），function（）{e.target.closest（.form”）。querySelector（“.sub”）.disabled=false}）；}）@prestock querySelectorAll（）。forEach和closest也有问题。见第二个例子
function unlock() {
    document.querySelector('.submit').removeAttribute("disabled");
}