同じページの別のボタンがクリックされるまでボタンがクリックされないようにするにはどうすればよいですか？

Question

私はゲームを開始する前にビデオを見なければならないページに取り組んでいます。ビデオとゲームのリンクは同じページにあります。別のリンクがクリックされるまでリンクを「ロック」する簡単な方法はありますか？ ここでは、ボタンの抜粋です：

<table class="t1"> 
 
     <tr> 
 
      <th class="th1"><a href="<?php echo $video_url;?>" target="_blank"><div type = "button" class="button button1">Watch Video</div></a></th> 
 
      <th class="th1"><a><div class="button button2">Objective:<div class ="desc"><?php echo $game_description;?></div></div></a></th> 
 
      <th class="th1"><a href="<?php echo $construct_url;?>" target="_blank"><div type = "button" class="button button3">Play Game</div></a></th> 
 
     </tr> 
 
</table>

Answer 1

ボタンは実際にはありませんが、アンカーがあるので、一方のアンカーのデフォルトアクションを防ぐために、もう一方のボタンがクリックされるまで、デフォルトのアクションを防ぐことができます。

var btn1 = document.getElementById('btn1'); 
 
var btn2 = document.getElementById('btn2'); 
 
var skip = true; 
 

 
btn1.addEventListener('click', function() { 
 
    skip = false; 
 
}); 
 

 
btn2.addEventListener('click', function(evt) { 
 
    if (skip) evt.preventDefault(); 
 
});

<table class="t1"> 
 
    <tr> 
 
    <th class="th1"> 
 
     <a href="test" target="_blank" id="btn1"> 
 
     <div type="button" class="button button1">Watch Video</div> 
 
     </a> 
 
    </th> 
 
    <th class="th1"> 
 
     <a> 
 
     <div class="button button2">Objective: 
 
      <div class="desc"> 
 
      description 
 
      </div> 
 
     </div> 
 
     </a> 
 
    </th> 
 
    <th class="th1"> 
 
     <a href="test" target="_blank" id="btn2"> 
 
     <div type="button" class="button button3">Play Game</div> 
 
     </a> 
 
    </th> 
 
    </tr> 
 
</table>

Answer 2

ボタンは、例えばクリックされるまで、私はあなただけのリンクを表示できませんでした、このためのjQueryを使用したい：

$(document).ready(function(){ 
    $("#showThisSecond").hide(); 
    $("#showThisFirst").click(function(){ 
     $("$showThisSecond").show(); 
    }); 
}); 

<button id='showThisFirst' /> 
<button id='showThisSecond' /> 

Answer 3

あなたは、ビデオとゲームの両方を提供する場合は、クライアントにだけDOMからの制限を削除するからクライアントを防止することは何もありません。

普通のユーザーを想定して、disabled属性を使用して、誰かがボタンをクリックしないようにすることができます。より安全な方法は、リンクを一切提供しないようにして、の後にを要求して追加することです（ビデオを視聴している場合はボタンを追加しても、href属性のみを指定することができます）。

これは明らかにJavaScriptを使用して行う必要があります。リンクを配信しない、HTML5 disabled属性を使用してボタンがクリックされないようにする方法がいくつかあります。