我想在提交后立即禁用提交按钮

Question

我想在提交后立即禁用“提交按钮”。这是我写的，但它不起作用。你能告诉我问题是什么吗？<div>    <form id="manual_form" action="" method="POST">        <button id="button" type="submit" name="manual_start">SUBMIT！</button>    </form></div><hr><script type="text/javascript">    let manual_form = document.getElementById('manual_form');    let manual_button = document.getElementById('button');    manual_form.addEventListener('submit', (evt) => {        console.log('submitted!');        manual_button.disabled = true;    }, false);</script>

Answer 1

当您单击该submit按钮时，页面将重新加载。这就是为什么您看不到该disabled属性正在运行的原因。evt.preventDefault();您可以在事件Handler中添加以防止重新加载

let manual_form = document.getElementById('manual_form');

let manual_button = document.getElementById('button');

manual_form.addEventListener('submit', (evt) => {

  evt.preventDefault();

  console.log('submitted!');

  manual_button.disabled = true;

}, false);

<div>

  <form id="manual_form" action="" method="POST">

    <button id="button" type="submit" name="manual_start">SUBMIT！</button>

  </form>

</div>

<hr>

Answer 2

submit可以使用该setAttribute()方法通过分配适当的属性来禁用它们disabled。在你的情况下，它将是这样的：

...

manual_button.setAttribute('disabled', 'disabled');

...

let manual_form = document.getElementById('manual_form');

    let manual_button = document.getElementById('button');

    manual_form.addEventListener('submit', (evt) => {

        evt.preventDefault();

        console.log('submitted!');

        manual_button.setAttribute('disabled', 'disabled');

    }, false);

<div>

    <form id="manual_form" action="" method="POST">

        <button id="button" type="submit" name="manual_start">SUBMIT！</button>

    </form>

</div>

<hr>

Answer 3

JavaScript 方面的工作方式与表单有关...刷新页面时会抛出错误。添加evt.preventDefault();事件监听函数以阻止页面刷新。该按钮被禁用。