JavaScript:如何防止双击按钮或禁用按钮

时间:2016-04-13 03:34:30

标签: javascript jquery laravel laravel-5.2 laravel-blade

我有一个网页,其中有多个用户信息详细信息。当我点击完整(这里有完整的按钮就在每个用户详细信息旁边)按钮时,它应该执行一些任务(例如,我在这里发送邮件) )并在重新定向到同一页面后禁用该按钮。 我该怎么做? 任何可能的建议?

[我正在制作laravel web应用程序的刀片模板]

我的网页演示:

<html>
    <head> 
        <title> User Details </title>

    <link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script src="https://code.jquery.com/jquery-1.12.0.min.js"></script> 

    </head>
    <body>


<div class="container">
<h3> Student Details </h3>
      <table  class="table table-striped table-bordered"  id="example">
        <thead>
          <tr>
            <td>Serial No</td>
            <td>Student Name</td>
            <td>Stdunet Email</td>
            <td>Course Name</td>  
            <td>Phone Number</td>
          <td>Action</td>
        </tr>
        </thead>
        <tbody>
          <?php $i=1; ?>
        @foreach($user as $row)
        @if($row->courses()->first())
          <tr>
            <td>{{$i}}</td>
            <td>{{$row->name }}</td>
            <td>{{$row->email}}</td>
           <td>{{$row->courses()->first()->name}} </td>
            <td>{{$row->phone}}</td>
           <td>

               <a href="{{route('sendMail',$row->id)}}" class="btn btn-warning">Complete</a>                                        

            </td>
          </tr>
          <?php $i++; ?>
          @endif


        @endforeach
        </tbody>


      </table>

    </div>

    </body>
</html>

2 个答案:

答案 0 :(得分:1)

您可以使用jquery的func collectionView(collectionView: UICollectionView, layout collectionViewLayout: UICollectionViewLayout, insetForSectionAtIndex section: Int) -> UIEdgeInsets { return UIEdgeInsets(top: 10.0, left: 10.0, bottom: 10.0, right: 10.0) } 方法。

.one()
// prevent anchor to click 
$(document).ready(function() {
  var clickCtr = 0;  
  $("a.btn").click( function() {
    if(clickCtr > 0) {
      return false; 
    }
    clickCtr++;
  });
});

答案 1 :(得分:0)

因此,有几种方法可以解决您的问题。

客户端的一个简单方法是使用jQuery(因为您在HTML中导入它)暂时禁用该按钮。

这是一个例子:

&#13;
&#13;
$(document).ready(function () {
     clicked = false;
     $(".btn").on('click', function (event) {  
           if (!clicked) {
             clicked = true;
             $(".text").text("Clicked!");
             setTimeout(function(){ 
               clicked = false;
               $(".text").text("");
             }, 2000);
           } else {
              $(".text").text("Already clicked!");
           }
     });
    
});
&#13;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<button class="btn btn-warning">Complete</button>
<text class="text"></text>
&#13;
&#13;
&#13;