フォームを送信した後でハイパーリンクを無効にする

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

をアンカー要素aは、フォーム要素ではないので、それはonsubmitイベントをトリガしません。 「クリック」イベントにバインドしてクリック状態を処理する必要があります。すべてのブラウザでアンカー要素の '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>

Answer 2

あなたは後に提出するCSSクラスを追加することができます。

.disabled-link{ 
    pointer-events: none; 
    cursor: default; 
} 

Can i Use browser support