JavaScript禁用按钮

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

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

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

以下是该按钮的实例。

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

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

<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事件。在输入框聚焦状态按回车也可以提交表单。

<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聚焦状态按回车也不会。

<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仓库点个星支持我们吧！

推荐订阅源

开飞机的老张

表单