JavaScript：如何防止雙擊按鈕單擊或禁用按鈕

Question

我有一個網頁，其中有多個用戶信息詳細信息。因此，當我單擊“完成”（每個用戶詳細信息旁邊有“完成”按鈕）時，它應該執行某些任務（例如，我在此處發送郵件）並禁用該按鈕在我再次重定向到同一頁面后。 我該怎么做？ 有什么建議嗎？

[這是我正在制作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>

Answer 1

您可以使用jquery的.one()方法。

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

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> <a href="https://www.google.co.in" target="_blank" class="btn btn-warning">Complete</a>

Answer 2

因此，有幾種方法可以解決您的問題。

從客戶端來看，一個簡單的方法就是使用jQuery（因為您已將其導入HTML）暫時禁用了該按鈕。

這是一個例子：

 $(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!"); } }); });

 <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>

JavaScript：如何防止雙擊按鈕單擊或禁用按鈕

問題描述

2 個解決方案

解決方案1
1 2016-04-13 03:44:47

解決方案2
0 2016-04-13 03:43:20

JavaScript：如何防止雙擊按鈕單擊或禁用按鈕

問題描述

2 個解決方案

解決方案1 1 2016-04-13 03:44:47

解決方案2 0 2016-04-13 03:43:20

解決方案1
1 2016-04-13 03:44:47

解決方案2
0 2016-04-13 03:43:20