jQuery 3: Buttonがダブルクリックされないようにボタンを無効にするには

ここでは、jQueryを使用してASP.NETのButtonコントールがダブルクリックされないように、ボタンを1度クリックしたらButtonコントールを無効にする方法を解説します。Webページがポストバック(送信)される前にButtonを無効にするには、ButtonコントロールのUseSubmitBehaviorプロパティに「false」を設定して、ASP.NET独自のポストバック機能を組み込む必要があります。

ASP.NET独自のポストバック機能を有効にすると、Buttonコントロールは、次のようなHTMLに変換されます。そして、ASP.NET独自のポストバック処理を行うJavaScriptが生成されます。ボタンをクリックしたときは、input要素のonclickイベントに設定されたJavaScript「javascript:__doPostBack(…)」が実行されてポストバックされます。

var theForm = document.forms['form1'];
if (!theForm) {
    theForm = document.form1;
}
function __doPostBack(eventTarget, eventArgument) {
    if (!theForm.onsubmit || (theForm.onsubmit() != false)) {
        theForm.__EVENTTARGET.value = eventTarget;
        theForm.__EVENTARGUMENT.value = eventArgument;
        theForm.submit();
    }
}

<input type="button" name="btnPostBack" value="ポストバック!" onclick="javascript:__doPostBack('btnPostBack','')" id="btnPostBack" class="btnSubmit" /> 

Webページがポストバックされる前にButtonを無効にするには、jQueryでButton(HTMLのinput type=”button”要素)にクリック時のイベント(onclick=”…”)を追加します。jQueryで追加したクリック時のイベントは、HTMLのinput要素にdisabled属性を追加してボタンを無効にします。input要素にdisabled属性を追加するには、jQueryのattr()メソッドを使用します。

Webページがポストバックされてサーバー側で処理中であることを示すために、処理中のメッセージ「処理中です…しばらくお待ちください!」とGIFアニメーション「progress.gif」も表示します。「images」フォルダには、GIFアニメーションのイメージファイル(progress.gif)を格納しておきます。

ASP.NETのLabelコントロールは、HTMLのspan要素に変換されます。span要素にHTML要素を含むテキスト文字を挿入するには、jQueryのhtml()メソッドを使用します。

$(function () {
 $('input.btnSubmit').click(function () {
 $('.lblMessage').html('<img src="images/progress.gif" alt="" />&nbsp;処理中です... しばらくお待ちください!');
 $(this).attr('disabled', 'disabled');
 });
});

<asp:Button ID="btnPostBack" runat="server" 
 CssClass="btnSubmit"  UseSubmitBehavior="false"
 Text="ポストバック!" onclick="btnPostBack_Click" />
<asp:Label ID="lblMessage" runat="server" 
 ForeColor="Red"  CssClass="lblMessage"
 Text="[ポストバック!]ボタンをクリックしてください..." /> 

Webページがポストバックされたら、サーバー側ではButtonのクリック時のイベントが実行されます。クリック時のイベントでは、3秒間スリープさせた後、Labelコントールに「ポスト完了!」のメッセージを設定してクライアント側のブラウザに送信します。

 protected void btnPostBack_Click(object sender, EventArgs e)
 {
  System.Threading.Thread.Sleep(1000 * 3); // sleep 3 seconds
  lblMessage.Text = "ポストバック完了!";
 }

サンプルの作成手順(jQuery-3.aspx)

  1. ButtonとLabelコントール配置
    Visual Studio(VS)のツールボックスから、ASP.NETのButtonとLabelコントールをドラッグ&ドロップしてWebページの<body>…</body>タグ内に配置します。ButtonのCssClassプロパティに「btnSubmit」、UseSubmitBehaviorプロパティに「false」、Textプロパティに「ポストバック!」、onclickイベントに「btnPostBack_Click」を設定します。LabelのForeColorプロパティに「Red」、CssClassプロパティに「lblMessage」、Textプロパティに「[ポストバック!]ボタンをクリックしてください…」を設定します。

    <asp:Button ID="btnPostBack" runat="server" 
     CssClass="btnSubmit"
     UseSubmitBehavior="false"
     Text="ポストバック!" 
     onclick="btnPostBack_Click" />
    <br /><br />
    <asp:Label ID="lblMessage" runat="server" 
     ForeColor="Red"
     CssClass="lblMessage"
     Text="[ポストバック!]ボタンをクリックしてください..." /> 
  2. jQueryのコード追加
    <head>…</head>タグ内に<script>タグを追加して、jQueryのライブラリーの組み込みとコードを追加します。

    <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(function () {
     $('input.btnSubmit').click(function () {
     $('.lblMessage').html('<img src="images/progress.gif" alt="" />&nbsp;処理中です... しばらくお待ちください!');
     $(this).attr('disabled', 'disabled');
     });
    });
    </script>
    
  3. コードビハインドにイベント追加
    コードビハンドには、Buttonのクリック時のイベント「btnPostBack_Click()」を追加します。クリック時のイベントでは、Sleep()メソッドで3秒間スリープした後に、LabelコントールのTextプロパティに「ポストバック完了!」を設定してクライアント側のブラウザに送信します。

    protected void btnPostBack_Click(object sender, EventArgs e)
    {
     System.Threading.Thread.Sleep(1000 * 3); // sleep 3 seconds
     lblMessage.Text = "ポストバック完了!";
    }
    
  4. サンプルをブラウザに表示
    VSのソリューションエクスプローラからサンプルのWebページ「jQuery-3.aspx」にマウスを移動して右クリックします。コンテキストメニューが表示されたら「ブラウザで表示」をクリックして選択します。
  5. ボタンをクリック
    ブラウザにサンプルが表示されたら、[ポストバック!]ボタンをクリックしてWebページをポストバックさせます。Webページがポストバックされる前にボタンが無効になっていることを確認します。さらに、処理中のメッセージとGIFアニメーションが表示されることを確認します。

サンプルのソースコード(jQuery-3.aspx)

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="jQuery-3.aspx.cs" Inherits="jQuery_3" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
 <title>jQuery 3: Buttonがダブルクリックされないようにボタンを無効にするには</title>
 <script src="https://code.jquery.com/jquery-2.2.0.min.js" type="text/javascript"></script>
 <script type="text/javascript">
 $(function () {
  $('input.btnSubmit').click(function () {
   $('.lblMessage').html('<img src="images/progress.gif" alt="" />&nbsp;処理中です... しばらくお待ちください!');
   $(this).attr('disabled', 'disabled');
  });
 });
 </script>
</head>
<body>
 <form id="form1" runat="server">
 <div>
 <h1>Buttonがダブルクリックされないようにボタンを無効にするには</h1>

 <asp:Button ID="btnPostBack" runat="server" 
  CssClass="btnSubmit"
  UseSubmitBehavior="false"
  Text="ポストバック!" 
  onclick="btnPostBack_Click" />
 <br /><br />
 <asp:Label ID="lblMessage" runat="server" 
  ForeColor="Red"
  CssClass="lblMessage"
  Text="[ポストバック!]ボタンをクリックしてください..." /> 
 </div>
 </form>
</body>
</html

サンプルのソースコード(jQuery-3.aspx.cs)

protected void btnPostBack_Click(object sender, EventArgs e)
{
 System.Threading.Thread.Sleep(1000 * 3); // sleep 3 seconds
 lblMessage.Text = "ポストバック完了!";
}

VSのサンプル画像(jQuery-3.aspx)

jQuery-3

シェアする

  • このエントリーをはてなブックマークに追加

フォローする