CODEWITHSUNDEEP
html
Akhil
Akhil

Reputation: 159

How to Disable Download link after 2 clicks on it?

I am facing issue in disabling download link after 2 clicks on it. Disable functionality is working properly but with a problem as mentioned below

Its either or situation for me. I am placing my code below.

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>

Upvotes: 0

Views: 1552

Answers (1)

Azee
Azee

Reputation: 81

What do you think about this :

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

Upvotes: 3

Related Questions