JavaScript メソッドの比較: jQuery と Vanilla を使用してボタンを有効または無効にする

この記事では、JavaScript を使用してボタンを有効または無効にする方法について説明します。まず、プレーンな JavaScript でこれがどのように動作するかを見ていき、その後、jQuery を使用して実装する方法を見ていきます。

JavaScript はインターネットの中核テクノロジーの 1 つです。これはほとんどの Web サイトで使用されており、プラグインを必要とせずにすべての最新の Web ブラウザーでサポートされています。このシリーズでは、日々の JavaScript 開発に役立つさまざまなヒントやコツについて説明します。

JavaScript を使用する場合、多くの場合、特定のアクションに基づいてボタンを有効または無効にする必要があります。通常、フォームを操作するときは、ユーザーがフォームの必須フィールドをすべて入力するまで、送信ボタンを無効にしておく必要があります。ユーザーがすべての必須フィールドに入力したら、これを自動的に有効にして、ユーザーがボタンをクリックしてフォームを送信できるようにします。

HTML では、ボタン要素には独自の状態があるため、有効または無効を維持できます。たとえば、フォームの読み込み中はボタンを無効にしておくことができます。後で、JavaScript を使用してこれを有効にすることができます。

今日は、JavaScript を使用してボタンを有効または無効にする方法を、いくつかの実際的な例を通して説明します。

バニラ JavaScript を使用してボタンを有効または無効にする

このセクションでは、プレーンな JavaScript を使用してボタンを有効または無効にする方法を示す実践的な例について説明します。

次の例を見てみましょう。

上記の例では、いくつかのテキスト フィールドと送信ボタンを備えた非常に単純なフォームを作成しました。フォームがロードされると、送信ボタンが無効になることに注意することが重要です。 disabled 属性を使用して、送信ボタンのデフォルト状態を無効に設定します。

次に、ユーザー名とパスワードの入力フィールドに onchange イベントを定義します。したがって、ユーザーがこれらのフィールドの値を変更すると、onchange イベントが発生し、最終的に toggleButton 関数を呼び出します。 toggleButton 関数では、ユーザーが 2 つの必須フィールドに値を入力したかどうかを確認します。この場合、送信ボタンの disabled プロパティを false に設定します。これにより、最終的に送信ボタンが有効になり、ユーザーがクリックできるようになります。一方、ユーザー名またはパスワードのフィールドが空の場合は、disabled プロパティを true に設定します。これにより、送信ボタンが無効になり、ユーザーはクリックできなくなります。

上の例では入力送信ボタンを使用しましたが、以下の例に示すように HTML ボタンを使用することもできます。

これは、プレーンな JavaScript を使用してボタンを有効または無効にする方法です。次のセクションでは、jQuery ライブラリの使用方法を見ていきます。

jQuery を使用してボタンを有効または無効にする

このセクションでは、jQuery ライブラリを使用してボタンの状態を切り替える方法について説明します。

前のセクションで説明した例を変更してみましょう。

まず、関数で使用できるように jQuery ライブラリをロードしました。上記の例の唯一の違いは、ボタンの状態を変更するために jQuery オブジェクトの attr メソッドを使用していることです。

jQuery オブジェクトの attr メソッドは、要素の特定の属性の値を設定または取得するために使用されます。単一のパラメーターのみで使用すると、プロパティの値を取得するために使用されます。一方、2 つのパラメーターとともに使用する場合は、プロパティの値を設定するために使用されます。この例では、これを使用してボタンの disabled プロパティの値を設定します。それ以外はすべて同じです。

jQuery 1.5 を使用している場合は、次のコード スニペットに示すように、attr メソッドの代わりに prop メソッドを使用する必要があります。

また、要素の属性を削除する場合は、次のコード スニペットに示すように、jQuery オブジェクトの removeAttr メソッドを使用することもできます。結果は、disabled プロパティを false に設定した場合と同じになります。

これらは、jQuery を使用してボタンを有効または無効にするさまざまな方法です。

今日は、JavaScript でボタンを有効または無効にする方法について、いくつかの実際的な例を示しながら説明しました。プレーンな JavaScript に加えて、jQuery ライブラリを使用してこれを実現する方法についても説明しました。

以上がJavaScript メソッドの比較: jQuery と Vanilla を使用してボタンを有効または無効にするの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。