JavaScript：ボタンをダブルクリックしないようにする方法またはボタンを無効にする方法

複数のユーザー情報の詳細が表示されるウェブページがあります。完全なボタンをクリックすると、すべてのユーザーの詳細の横にあるボタンが表示されます。タスク（例えば私はここでメールを送信しています）を開き、同じページに再度リダイレクトした後にボタンを無効にします。どうすればよいですか？可能な提案はありますか？JavaScript：ボタンをダブルクリックしないようにする方法またはボタンを無効にする方法

私のWebページのデモ[私は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>

出典

2016-04-13 Hola

だからあなたの問題を処理するために、いくつかの方法があります。

クライアント側からの単純なものは、ボタンを一時的に無効にするために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>

出典

2016-04-13 03:43:20 Aleks

あなたはjQueryの.one()メソッドを使用することができます。ここでは

はexempleです。

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

出典

2016-04-13 03:44:47 pradeep1991singh

問題はあなたのソリューションである参照してください。私はそれがクリックされた見せて初めてでクリックして、タスクを実行するときですが、私はもう一度クリックしたときには、タスクを再実行していますが、私はしたくありませんそれをする！ボタンを無効にするか、それ以上クリックしないようにする必要があります。ここでは、同じページに同じボタンのリストが表示されています。 – Hola

@ x69それに応じてコードを更新しました。こちらのデモをご覧ください - https://jsfiddle.net/pradeep1991singh/wzj5o3kz/1/ – pradeep1991singh

@ x69ここ - https://jsfiddle.net/pradeep1991singh/wzj5o3kz/1/ – pradeep1991singh

JavaScript：ボタンをダブルクリックしないようにする方法またはボタンを無効にする方法

答えて

関連する問題