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

Question

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

欢迎来到 StackOverflow！你很亲密。查看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>

祝你的网站好运！