2点击后如何禁用下载链接?

时间:2017-08-31 06:54:12

标签: html html5

我在2次点击后禁用下载链接时遇到问题。禁用功能正常,但出现如下所述的问题

  • 如果禁用正在进行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>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

您如何看待这个:

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');
        }
    });