javascript - 提交表单后禁用超链接

Question

我试图在单击超链接后禁用它。我找到了一个使用 onSubmit 函数的解决方案，因为这将允许表单提交，然后立即禁用链接，但在这里它没有这样做。

我还编写了一个 JavaScript 函数，但问题是单击按钮后如何调用该函数。

JS

 function disableLink() {
     if(document.getElementById('downloadReport').clicked = true) {
        document.getElementById('downloadReport').disabled = true;   
     }
 }

表格:

 <td class="dataFieldCell">
            <div class="esignNavigation">
                <s:if test="%{#parameters.showReport}">
                <a href="#x" id="downloadReport" style="width:155px" title="This function will provide you a 30 day download of all your eSign transactions." onSubmit="document.getElementById('viewIntegrationReport').disabled=true"><span>Export E-Sign Information</span></a> 
                </s:if>             
            </div> 
        </td> 

如果有人做过类似的事情，请告诉我。

谢谢。

Answer 1

anchor 元素a不是表单元素，因此它不会触发onsubmit事件。您需要绑定(bind)到“单击”事件并自己处理单击状态。并非所有浏览器都支持 anchor 元素的“disabled”属性，因此您不能依赖它来实现行为或更改外观。您需要向元素添加一个类，并为该类添加 CSS，以使其显示为禁用。

var elem = document.getElementById("download");
elem.addEventListener("click", myFunction, false);

var download_clicked = false;
function myFunction(ev) {
  if(download_clicked) {
    ev.stopPropagation();
  } else {
    alert("One time!");
    download_clicked = true;
    elem.classList.add("disabled");
  }
}

a.disabled {
  color: #aaa;
  text-decoration: none;
  cursor: default;
}

<a href="#" id="download">This Works</a>
<br>
<a href="#" id="download2" onclick='alert("Every Time!\ndisabled="+this.disabled);this.disabled=true;'>This doesn't</a>