如何使 HTML 按钮标记在单击后不可单击？

Question

目前分配的任务是创建一个使用 python 可视化网络的网站。这样，单击按钮后，python 脚本将运行关闭用户设置的特定参数。为避免巨大的加载请求，我们只希望用户单击按钮一次，而不能多次运行脚本。我们想出的想法是让按钮被点击一次，然后在一个请求之后，变成禁用的（直到他们刷新页面，虽然我知道他们可以再次运行它，但我们会讨论这个问题一旦我们到达那里）。我们目前正在使用锚标记来调用 python 脚本，也使用 PHP。我相信，由于我们使用的是锚标记，我们可能必须更改锚标记的 href 属性，这样它就不会多次运行 python 脚本，甚至使按钮无用如果它可点击。

我们尝试使用 JavaScript 函数：

let toggleVisual = false;

let hideVisual = function() {
  let visual = document.getElementsById('visual');

  if (toggleVisual = false) {
    visual.disabled = true;
    toggleVisual = true;
  }
}

还有更多JavaScript：

document.getElementById('form-button').onclick = function () {
    this.disabled = true;
}

甚至一些 HTML:

<a href="?run=true" onclick="return false;"><button  id="form-button" class="visualize-btn">Visualize</button></a>

PHP代码调用python脚本：

   <?php
   if (isset($_GET["run"])) {
      $output = shell_exec('sh test.sh');
      echo "<pre>$output</pre> works";
    }
   ?>

我希望当我单击运行脚本的按钮时，按钮（或锚标记）将被禁用，确保 python 脚本不会运行多次。

Answer 1

欢迎使用 Whosebug！你差点.. 查看 onclick() 活动，你可能会喜欢它。基于您第一次尝试的简单代码类似于：

<button id="form-button" class="visualize-btn" onclick="doSomething();">Visualize</button>

<script type="text/javascript">
var wasClicked = false;
function doSomething() {
    if(wasClicked) { return; }
    wasClicked = true;

   // Your code here
   alert('Hello world!');
}
</script>

祝您的网站好运！

如何使 HTML 按钮标记在单击后不可单击？

How do I make a HTML button tag unclickable after one click?

html

javascript

php

anchor

button