JavaScript 如何动态禁用按钮元素 |
您所在的位置：网站首页 › javascript禁用按钮 › JavaScript 如何动态禁用按钮元素 |
|
JavaScript 如何动态禁用按钮元素
在本文中,我们将学习如何使用JavaScript动态禁用HTML按钮元素,并借助”disabled”属性。 在HTML按钮元素中,”disabled”属性接受一个布尔值(true或false),根据该值,它禁用按钮并使其无法操作,即不可点击。我们可以使用这个属性将HTML中的任何按钮禁用,只需将”disabled”属性设置为”true”即可。 语法 Disabled Button让我们通过一些示例来理解这个问题 – 示例1在这个示例中，我们将通过将“disabled”属性设置为“true”来禁用一个按钮元素。 文件名：index.html How to disable button element dynamically using JavaScript? How to disable button element dynamically using JavaScript? Disabled button在这个示例中，我们将使用2个单独的按钮来动态禁用和启用一个HTML按钮元素，分别用于启用和禁用按钮。 文件名：index.html How to disable button element dynamically using JavaScript? How to disable button element dynamically using JavaScript? Enabled button Enable Disable const btn = document.getElementById("btn-p"); const enableBtn = document.getElementById("enable"); const disableBtn = document.getElementById("disable"); enableBtn.addEventListener("click", () => { btn.disabled = false; btn.textContent = "Enabled button"; }); disableBtn.addEventListener("click", () => { btn.disabled = true; btn.textContent = "Disabled button"; }); 示例3在这个示例中，我们将在页面加载后一定时间（5秒）过去后禁用一个按钮元素。我们可以使用setTimeout()函数来延迟执行一个函数，延迟的时间由指定的时间（以毫秒为单位）来确定。 文件名：index.html How to disable button element dynamically using JavaScript? How to disable button element dynamically using JavaScript? Enabled button const btn = document.getElementById("btn"); setTimeout(() => { btn.disabled = true; btn.textContent = "Disabled button"; }, 5000); 示例4在这个示例中，当表单提交时，我们将禁用一个按钮元素。我们可以使用onsubmit事件来在表单提交时执行一个函数，在这个函数中，我们可以禁用按钮。 文件名：index.html How to disable button element dynamically using JavaScript? How to disable button element dynamically using JavaScript? Submit function disableButton() { const btn = document.getElementById("btn"); btn.disabled = true; btn.textContent = "Disabled button"; } 结论在本文中，我们学习了如何使用JavaScript动态禁用HTML按钮元素，借助disabled属性。我们可以通过将disabled属性设置为true来禁用按钮，通过动态更改disabled属性的值，通过使用setTimeout()函数延迟执行一个函数，或者通过在表单提交时执行一个函数来禁用按钮。 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |