Question

所以我正在尝试在javascript处理时禁用按钮，然后在javascript完成时重新启用它。下面的代码适用于我尝试的每个浏览器，IE7除外。在IE7中它似乎忽略了禁用和重新启用，看起来它仍然一直启用。那么如何才能在IE7中获得正确的行为？

    <script>
      function doSomething()
      {
        document.getElementById("myButton").disabled = true;
        ...
        xmlhttp = new XMLHttpRequest();
        xmlhttp.open("GET", url, false);
        xmlhttp.send(null);
        response = xmlhttp.responseText();

        if (response != "false")
        {
          document.getElementById("myButton").disabled = false;
        }
        ...
      }
    </script>
    <form onsubmit="doSomething(); return false;">
      <input type="submit" id="myButton" value="Do Stuff"/>
    </form>
    <div id="results"></div>

Answer 1

disabled不是真/假切换。如果要在禁用后启用某些内容，则可以完全删除disabled属性。

设置：document.getElementById("myButton").setAttribute("disabled","disabled");

要清除：document.getElementById("myButton").removeAttribute("disabled");

Answer 2

您需要将disabled = false部分放在ajax响应处理程序中：

function doSomething() {
  var btn = document.getElementById("myButton");
  btn.disabled = true;

  var xhr = new XMLHttpRequest();
  xhr.open("GET", url, false);
  xhr.send(null);
  var response = xhr.responseText;

  // Test this stuff!
  alert(response);

  btn.disabled = false;

  // Test more!
  alert(btn.disabled);
}

Answer 3

所以这是IE7的重绘问题，因此在执行完所有内容之前它不会重绘。所以经过更多的研究和许多尝试让IE重新绘制，当我想要它时，这是最终有效的，它真的很好，我希望找到一个更好的方法来做到这一点，但它现在有效。

<script>
  function doSomething()
  {
    document.getElementById("myButton").disabled = true;
    setTimeout(doSomething2(), 1);
    return false;
  }

  function doSomething2()
  {
    xmlhttp = new XMLHttpRequest();
    xmlhttp.open("GET", url, false);
    xmlhttp.send(null);
    response = xmlhttp.responseText();
    document.getElementById("results).innerHtml = response;
    setTimeout(doSomething3(), 1);
    return false;
  }

  function doSomething3()
    document.getElementById("myButton").disabled = false;
    return false;
  }
</script>
<form onsubmit="doSomething(); return false;">
  <input type="submit" id="myButton" value="Do Stuff"/>
</form>
<div id="results"></div>

在AJAX响应之后禁用然后重新启用按钮

3 个答案: