JavaScript禁用按钮

原文:Disable a Button in JavaScript

如何用原生JavaScript禁用一个按钮。

在JavaScript中,button元素可以设置一个disabled属性,来阻止点击按钮。例如,一个点击弹出alert的按钮:

1
2
3
4
5
6
<button id="my-alert-button">Show Alert</button>
<script>
document.querySelector('#my-alert-button').addEventListener('click', function() {
alert('Clicked on button!');
});
</script>

以下是该按钮的实例。

静态博客无法显示,请查看原文

如果按钮设置了disabled属性,点击按钮不会发生任何事。

1
2
3
4
5
6
7
8
<button id="my-alert-button">Disabled Button</button>
<script>
document.querySelector('#my-alert-button').addEventListener('click', function() {
alert('Clicked on button!');
});
// 现在点击按钮不会发生任何事
document.querySelector('#my-alert-button').disabled = true;
</script>

静态博客无法显示,请查看原文

表单

按钮也可以用来提交表单。例如,点击以下按钮会触发my-form的submit事件。在输入框聚焦状态按回车也可以提交表单。

1
2
3
4
5
6
7
8
9
10
<form id="my-form">
<input type="text" placeholder="Sample Input">
<button type="submit">Submit Form</button>
</form>
<script>
document.querySelector('#my-form').addEventListener('submit', function(ev) {
ev.preventDefault();
alert('Form submitted!');
});
</script>

静态博客无法显示,请查看原文

如果禁用了按钮,就相当于禁用了表单的提交。当点击按钮时不会触发my-form的submit事件,在input聚焦状态按回车也不会。

1
2
3
4
5
6
7
8
9
10
11
<form id="my-form">
<input type="text" placeholder="Sample Input">
<button type="submit">Submit Form</button>
</form>
<script>
document.querySelector('#my-form').addEventListener('submit', function(ev) {
ev.preventDefault();
alert('Form submitted!');
});
document.querySelector('#my-form button').disabled = true;
</script>

静态博客无法显示,请查看原文

本教程对您有帮助吗?来GitHub仓库点个星支持我们吧!