jQueryでボタンを無効にする

  2. プログラミングのヒント
  3. jQuery ハウツー
  4. jQueryでボタンを無効にする
Ankit Raj Goyal 2024年2月15日
jQuery jQuery Button
  1. eventオブジェクトをonclickイベントハンドラーに渡すことにより、jQueryのボタンを無効にする
  2. onclick イベント ハンドラで this 参照を使用して jQuery でボタンを無効にする
  3. bind() メソッドを使用して jQuery でボタンを無効にし、this に正しい値を割り当てる
  4. call() メソッドを使用して jQuery でボタンを無効にし、this に正しい値を割り当てる
  5. JavaScript の柔軟な動的型付けを利用して要素 ID を使用して jQuery でボタンを無効にする
  6. jQuery の .prop() メソッドを使用して disabled DOM プロパティで jQuery のボタンを無効にする
jQueryでボタンを無効にする

このチュートリアルでは、jQuery でボタンを無効にするために、event オブジェクト、this 参照、element id などのさまざまな引数を使用して、onclick イベント ハンドラーを使用します。 また、関数の引数の動的型付け、event.target と event.currentTarget の比較、および jQuery の .prop() と .attr() メソッドの比較に関するヒントもここにあります。

eventオブジェクトをonclickイベントハンドラーに渡すことにより、jQueryのボタンを無効にする

onclick イベント ハンドラーは、ターゲット要素をクリックするたびに発生します。 デフォルトでは、onclick へのコールバックは 1つの引数、event オブジェクトのみを受け取ります。

このデフォルト引数を、jQuery でボタンを無効にする最初の方法として使用しましょう。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default event argument</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript">
        function disable(e){
            $(e.currentTarget).attr("disabled","disabled");

            //updating the text to disabled
            $(e.currentTarget).html("I am disabled");
        }
    </script>
    <link rel="stylesheet" href="disable_button_jQuery.css">
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable(event)">Click to disable me</button>
    </div>
</body>
</html>

onclick イベント ハンドラーをアタッチする button 要素があります。 それへのコールバックは、デフォルトの event オブジェクト引数を受け取ります。

キーコード行でボタンを無効にします。

$(e.currentTarget).attr("disabled","disabled")

event オブジェクトの currentTarget プロパティは、イベント ハンドラーがアタッチされている要素 (この場合は button 要素) を識別します。

最後に、jQuery の .attr() メソッドを使用して、この button 要素の無効な HTML 属性を disabled に設定します。

また、コードの次の行で、jQuery の .html() メソッドを使用して button テキストを更新し、無効な状態を表示します。

これは、このソリューションの実際のデモです。

イベント Object を渡して jquery ボタンを無効にする

プロのヒント:

event target プロパティは currentTarget プロパティに似ていますが、イベントが発生する要素を参照します。 これは、イベント バブリングの場合に DOM 要素が伝播するときに異なる可能性があります。

したがって、この場合は currentTarget プロパティを使用することをお勧めします。

onclick イベント ハンドラで this 参照を使用して jQuery でボタンを無効にする

onclick イベント ハンドラのデフォルトの this 参照の問題

onclick イベント ハンドラー内の this キーワードは、それが発生する要素を参照します。 しかし、JavaScript の this キーワードは、実行時にそのコンテキストを動的に取得します。

したがって、デフォルトでは、この場合はトリガー要素を参照しません。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Default this Keyword</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(){
            console.log("The value of this by default is : " +  this);
            $(this).attr("disabled","disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable()">Click to disable me</button>
    </div>
</body>
</html>

onclick コールバック disable 関数内で this 参照を使用します。 理解を深めるために、this オブジェクトの値もログに記録します。

以下のこのコードの出力を見てみましょう。

この参照のデフォルトの動作

ここで 2つのことが起こりました。

  1. まず、コードが意図したとおりにボタンを無効にしませんでした。
  2. 次に、コンソールで this の値を見ると、window オブジェクトを参照しています。 これは予期される動作です。

インライン イベント ハンドラの関数の外側で disable コールバックを実行すると、JavaScript はその this キーワードをグローバルな window オブジェクトに動的に参照します。

この問題を解決するには、いくつかの方法があります。

bind() メソッドを使用して jQuery でボタンを無効にし、this に正しい値を割り当てる

onclick ハンドラーの disable コールバックで bind() メソッドを使用して this キーワードの参照を設定できます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bind method</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(e){
            console.log("The value of 'this' by explicity specifying it with bind method is : " +  this);
            $(this).attr("disabled","disabled");

            //updating the text to disabled
            $(this).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable.bind(this)()">Click to disable me</button>
    </div>
</body>
</html>

onclick = "disable.bind(this)()" という行で適切なコンテキストを設定します。 字句的には、onclick の this キーワードは button 要素を参照します。this を bind() メソッドに渡して、この値を永続的な値として設定します。

この後、this の値は実行時に変更されません。

コードの残りの部分は、上記のソリューションと似ています。 以下の出力を見てみましょう。

bindメソッドでthisの正しい値を設定

コードは、必要に応じてボタンを無効にします。 また、コンソール出力の this の値は HTMLButtonElement を参照するようになりました。

注意すべき落とし穴

次のように、.bind() メソッドの後の括弧のペアを忘れないでください。

onclick = "disable.bind(this)()"

.bind() は、基になる関数を新しい this 値で新しい関数にラップし、この関数を返します。 そのため、このラッパー関数を呼び出すときは、末尾に括弧 () を必ず付けてください。

call() メソッドを使用して jQuery でボタンを無効にし、this に正しい値を割り当てる

call() メソッドで呼び出すときに、this に正しい値を割り当てることもできます。 call() は、特定の関数呼び出しに対して特定のコンテキストを this に割り当てるだけであることに注意してください。一方、.bind() は、this の値を永続的に固定します。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Call method</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(e){
            console.log("The value of 'this' by specicifying it during execution with call method is : " +  this);
            $(this).attr("disabled","disabled");

            //updating the text to disabled
            $(this).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable.call(this)">Click to disable me</button>
    </div>
</body>
</html>

コード スニペットを使用して、実行中に this の適切な値を割り当てます。

onclick = "disable.call(this)"

コードの残りの部分のロジックについては、すでに前に説明しました。

これがこのプログラムの出力です。

callメソッドでthisの正しい値を設定

注意すべき落とし穴

ここでは、.call() メソッドの後に括弧 () のペアはありません。 .call() メソッドは、.bind() メソッドのように新しい関数を返しません。

同じ関数呼び出しで新しい this コンテキストを設定するだけなので、最後に括弧を付けて再度呼び出す必要はありません。

JavaScript の柔軟な動的型付けを利用して要素 ID を使用して jQuery でボタンを無効にする

JavaScript の優れた点の 1つは、その柔軟性です。 ほぼ同じコードで、やりたいことが何でもできるようになります。

同じことが JavaScript 関数にも当てはまります。 JavaScript のすべての関数は、必要な数の引数を受け取ることができます。

JS は動的に型付けされる言語であるため、関数定義と同じ引数のデータ型を渡す必要はありません。

JavaScript のこの機能を利用して、上で書いたのとほぼ同じコードを使用して、エレメント ID で jQuery のボタンを無効にしましょう。

onclick へのコールバックは、その関数定義に従って、event オブジェクトという 1つの引数のみを受け入れると述べました。 しかし、要素 id 引数を渡すと、JavaScript は文句を言いません!

魔法のコードは次のとおりです。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using Dynamic Typing</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <link rel="stylesheet" href="disable_button_jQuery.css"/>
    <script type="text/javascript">
        function disable(id){     // replace id with e when you want to display the default event object type
            $("#"+id).attr("disabled","disabled");
            console.log("The type of argument \nwhen we pass the \n'id' type object as argument is : \n"
                        + typeof arguments[0]);

            // console.log("The type of argument \nwhen we pass the \ndefault 'event' object as argument is : \n"
            // + typeof arguments[0]);

             //update the text to disabled
            $("#"+id).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable('disable_me')">Click to disable me</button>
    </div>
</body>
</html>

id をイベント ハンドラ onclick ="disable('disable_me')" へのコールバックに渡します。

JavaScript を使用すると、この引数の型が関数定義でハードコードされた event 引数の型と異なることに文句を言わずに使用できます。

次に、それを使用して、button 要素の disabled HTML 属性を値 disabled に設定します。次のようにします。

$("#" + id).attr("無効","無効");

出力を見てみましょう。

要素 ID でボタンを無効にする

コードが正しく動作することがわかります。 また、右側のコンソール出力では、引数の型は文字列で、コールバックに渡される要素 id です。

デフォルトの event 型の引数を渡すときの引数の型も比較してみましょう。

    <script type="text/javascript">
        function disable(event){     // replace id with e when you want to display the default 										//event object type
             //$("#"+id).attr("disabled","disabled");
            // console.log("The type of argument \nwhen we pass the \n'id' type object as 								//argument is : \n"
                        // + typeof arguments[0]);

            console.log("The type of argument \nwhen we pass the \ndefault 'event' object as 						argument is : \n"
                        + typeof arguments[0]);

             //update the text to disabled
           // $("#"+id).html("I am disabled");
        }
    </script>
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable(event)">Click to disable me</button>
    </div>

出力は次のとおりです。

コールバックへのデフォルトのイベント オブジェクト引数

ここで、コンソールの引数の型が object であることがわかります。event は JavaScript のオブジェクトです。

jQuery の .prop() メソッドを使用して disabled DOM プロパティで jQuery のボタンを無効にする

最後に、上記のすべてのソリューションで disabled DOM プロパティを使用することもできます。 このプロパティは HTML の disabled 属性に対応し、jQuery の .prop() メソッドでアクセスできます。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Using prop method</title>
    <script type="text/javascript" src="jQuery.js"></script>
    <script type="text/javascript">
        function disable(e){
            $(e.currentTarget).prop("disabled",true);

            //updating the text to disabled
            $(e.currentTarget).html("I am disabled");
        }
    </script>
    <link rel="stylesheet" href="disable_button_jQuery.css">
</head>
<body>
    <div id="main">
        <button id="disable_me" onclick="disable(event)">Click to disable me</button>
    </div>
</body>
</html>

コードは、上記の event デフォルト引数を使用するメソッドに使用したものとほぼ同じです。 次のように、DOM disabled プロパティのみを使用します。

$(e.currentTarget).prop("disabled",true);

動作デモは次のとおりです。

DOM プロパティで jQuery のボタンを無効にする

注意すべき落とし穴

disabled DOM プロパティは、disabled という値を取る disabled HTML 属性とは異なり、ブール値を取ることに注意してください。 したがって、このメソッドの .prop() メソッドで値 true を渡すようにしてください。