在 JavaScript 中禁用按钮

Question

在 JavaScript 中， 按钮元素有一个 disabled 属性，您可以设置以防止单击按钮，例如，假设您有一个按钮，当您单击它时会显示警报：

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

这是上述按钮的实时版本。 如果你设置一个 disabled按钮上的属性，单击按钮不会执行任何操作。

<button>Disabled Button</button>
<script>
  document.querySelector('#my-alert-button').addEventListener('click', function() {
    alert('Clicked on button!');
  });
  // Now clicking on the button won't do anything
  document.querySelector('#my-alert-button').disabled = true;
</script>

With Forms

按钮也可用于提交 表单 。 例如，点击下面的按钮会触发一个 提交 事件 my-form，在文本输入具有焦点时点击 enter 键也会提交表单。

<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当您单击按钮时，或者当您在文本输入具有焦点时点击 输入 时，见下方。

<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>