在前端开发中，我们经常需要在特定情况下禁用表单中的所有元素，例如表单提交时或者根据用户的选择禁用某些字段。本文将介绍如何使用 JavaScript 和 jQuery 来实现这一功能。
原生 JavaScript 实现
要禁用表单中的所有元素，您可以遍历表单中的每个元素，并将其 disabled 属性设置为 true。以下是一个示例函数：
function disableFormElements(form) {
const elements = form.elements;
for (let i = 0; i < elements.length; i++) {
elements[i].disabled = true;
}
}该函数接受一个表单元素作为参数，并使用一个 for 循环来遍历表单中的每个元素。然后，它将每个元素的 disabled 属性设置为 true。
以下是一个基本示例，演示如何使用该函数：
<form id="my-form">
<input type="text" name="name" value="John Doe">
<input type="email" name="email" value="johndoe@example.com">
</form>
<button onclick="disableFormElements(document.getElementById('my-form'))">Disable Form Elements</button>在此示例中，我们创建了一个包含两个输入字段的表单，并在按钮上添加了一个 onclick 事件处理程序。当用户单击该按钮时，它将调用 disableFormElements 函数并传递表单元素的引用作为参数。
使用 jQuery 实现
如果您使用 jQuery，禁用表单中的所有元素会更加简单。您只需要使用以下一行代码：
$('#my-form :input').prop('disabled', true);在此代码示例中，我们使用 jQuery 选择器选择 ID 为 my-form 的表单中的所有输入元素。然后，我们使用 prop 方法将这些输入元素的 disabled 属性设置为 true。
以下是一个包含 jQuery 禁用表单元素代码的完整示例：
<form id="my-form">
<input type="text" name="name" value="John Doe">
<input type="email" name="email" value="johndoe@example.com">
</form>
<button onclick="$('#my-form :input').prop('disabled', true)">Disable Form Elements</button>在此示例中，我们使用与上面相同的表单，但是使用 jQuery 而不是原生 JavaScript 来禁用表单元素。按钮的 onclick 事件处理程序调用一个匿名函数，该函数使用 jQuery 选择器选择表单中的所有输入元素，并将它们的 disabled 属性设置为 true。
总结
在本文中，我们介绍了如何使用原生 JavaScript 和 jQuery 来禁用表单中的所有元素。尽管原生 JavaScript 需要编写更多代码，但它可以让您更好地控制表单元素。相比之下，jQuery 更加简洁易懂，对于熟悉 jQuery 的开发人员来说更容易理解和维护。
无论您选择哪种方法，禁用表单元素都是一项有用的功能，可以增强用户体验并确保数据的正确性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/27645