如何禁用2次點擊後下載鏈接？

Question

我在點擊兩次後禁用下載鏈接時遇到了問題。禁用功能是否工作正常，但有一個問題，因爲下面提到

• 如果禁用正在2次點擊，文件下載將停止其使用PHP
• 如果下載的作品，關閉工作不

它對我來說是無論或者是情況。我在下面放置我的代碼。

var preventClick = false; 
 
var howMany = 1; 
 
$('.ThisLink').click(function(e) { 
 
    howMany += 1; 
 
    if (howMany == 3) { 
 
    $(this) 
 
     .css('cursor', 'default') 
 
     .css('text-decoration', 'none') 
 
    } 
 
    /*if (!preventClick) { 
 
     $(this).html($(this).html() + ' lalala'); 
 
    } 
 

 
    preventClick = true;*/ 
 

 
    return false; 
 
});

<script src="https://code.jquery.com/jquery-1.12.4.min.js"></script> 
 
<table id="datatable" class="table table-striped table-bordered"> 
 
    <thead> 
 
     <tr> 
 
     <th>#</th> 
 
     <th>Report</th> 
 
     <th>Action</th> 
 
     </tr> 
 
    </thead> 
 
    <tbody> 
 
     <?php 
 
     $x = 1; 
 
      
 
      foreach ($h->result() as $row) 
 
      
 
      { $ids = explode(',',$row->report); 
 
      
 
      $temp = sizeof($ids); 
 
      
 
      for($i =0; $i < $temp ; $i++) 
 
      { ?> 
 
     <tr> 
 
     <td> 
 
      <?php echo $x++;?> 
 
     </td> 
 
     <td> 
 
      <?php echo $ids[$i];?> 
 
     </td> 
 
     <td> 
 
      <!-- <?php echo base_url()?>uploadFiles/<?php echo $ids[$i]; ?> --> 
 
      <a href="<?php echo base_url()?>uploadFiles/<?php echo $ids[$i]; ?>?>" target="_blank" class="btn btn-info ThisLink" download>Download</a> 
 
      <!-- <button id="my_button">Click Here</button> --> 
 
     </td> 
 
     <?php } ?> 
 
     </tr> 
 
     <?php } 
 
     ?> 
 
    </tbody> 
 
</table>

Answer 1

你覺得這個怎麼樣：

CSS：

<style type="text/css"> 
    .disabled{ 
     background-color: gray; 
     pointer-events: none; 
    } 
</style> 

HTML：

<a href="downloadLocation.ext" id="autoIncrementWithPhp" class="yourClassLink">Link</a> 

JS：

<script type="text/javascript"> 
    //Create empty array 
    var arrayRememberClick=[]; 

    //Add all link id to this array and initialise counter to 0 
    $('.yourClassLink').each(function(){ 
     var idCurrent = $(this).attr('id'); 
     arrayRememberClick[idCurrent]=0; 
    }); 

    //Detect click 
    $('.yourClassLink').click(function(event){ 
     var idClicked = $(this).attr('id'); 
     arrayRememberClick[idClicked] += 1; 
     if(arrayRememberClick[idClicked]>=2){ 
      $('#'+idClicked).addClass('disabled'); 
     } 
    });