在前端开发中，有时我们需要禁用某些按钮，比如表单提交按钮，在表单验证未通过的情况下应该被禁用。而当表单验证通过后，我们需要启用这些按钮以便用户进行提交操作。在这种情况下，我们可以使用一个非常实用的 npm 包 – enable-buttons。
什么是 enable-buttons
enable-buttons 是一个用于启用/禁用 HTML 元素的 JavaScript 库。它允许我们在需要的时候动态地启用或禁用按钮，以防止用户在不应该提交表单时进行操作。
安装和使用
安装
要使用 enable-buttons，我们需要先安装它。我们可以使用 npm 进行安装，打开终端并输入以下命令即可：
npm install enable-buttons
使用
安装好 enable-buttons 后，我们需要在 HTML 中引入它的代码。我们可以通过以下方式引入：
<script src="node_modules/enable-buttons/enable-buttons.min.js"></script>
引入 enable-buttons 后，我们就可以在 JavaScript 代码中使用它了。首先，我们需要为需要启用或禁用的按钮添加类名 js-disable-on-submit（或其他自定义类名），例如：
<button class="js-disable-on-submit">提交</button>
接下来，我们可以通过以下代码获取所有需要启用/禁用的按钮：
var buttons = document.querySelectorAll('.js-disable-on-submit');在需要禁用按钮的情况下，我们可以使用以下代码：
enableButtons.disable(buttons);
在需要启用按钮的情况下，我们可以使用以下代码：
enableButtons.enable(buttons);
示例代码
下面是一个完整的使用 enable-buttons 的示例代码：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
--------------------- ------------
------- -----------------------------------------------------------------
-------
------
------
------ ----------- ---------------------
------ --------------- --------------------
------- ----------------------------------------
-------
--------
--- ------- - ---------------------------------------------------
-------- ------------ -
-- ------
-- ------ -
-------------------------------
-- ------
-
-
-- ------------- ---------- --
------------------------------------------------------------------------- ----------- -
-------------------
-------------
---
---------
-------
-------这是一个简单的表单示例，当表单验证通过后，我们通过 enableButtons.disable() 函数禁用提交按钮，防止用户再次提交。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066e20a563576b7b1ece20