ホームページ > ウェブフロントエンド > フロントエンドQ&A > jqueryはボタ​​ンが無効かどうかを判断します

jqueryはボタ​​ンが無効かどうかを判断します

王林
リリース: 2023-05-18 17:40:19
オリジナル
1218 人が閲覧しました

Web 開発では、jQuery を介してボタンの disabled 属性を操作する必要があることがよくあります。 disabled 属性を true に設定するとボタンはクリックできなくなり、false に設定するとボタンをクリックできるようになります。したがって、多くのシナリオでは、jQuery を使用して、現在のボタンの disabled 属性が true か false かを判断し、それに応じて処理する必要があります。

1. ボ​​タンの無効な属性値を取得する

jQuery を使用してボタンの無効な属性値を取得するのは非常に簡単で、prop() メソッドを使用するだけです。 prop() メソッドは、要素の属性値を取得または設定できます。たとえば、次のコードは、ID myBtn のボタンの無効な属性値を取得できます。

var disabled = $("#myBtn").prop("disabled");
ログイン後にコピー

上記のコードでは、$() メソッドを使用して ID myBtn のボタンを取得し、次に prop () メソッドは、disabled 属性値を取得するために使用されます。 disabled が true の場合は、現在のボタンをクリックできないことを意味し、disabled が false の場合は、現在のボタンをクリックできることを意味します。

2. ボタンがクリック可能かどうかの判定

上記のコードによれば、disabled 属性の値が false かどうかを判断することで、ボタンがクリック可能かどうかを判定できます。以下はサンプル コードです。

if ($("#myBtn").prop("disabled") === false) {
    // 按钮可点击,做相应处理
} else {
    // 按钮不可点击,不做处理
}
ログイン後にコピー

上記のコードでは、ID myBtn のボタンの無効な属性値が false であるかどうかが判断されます。そうでない場合は、if ステートメントのコードが実行され、そうでない場合は、else ステートメントのコードが実行されます。

3. ボタンをクリックできないかどうかを判断する

ボタンをクリックできないかどうかを判断する必要がある場合があります。現時点では、disabled 属性値が true であるかどうかを判断するだけで済みます。以下にサンプル コードを示します。

if ($("#myBtn").prop("disabled") === true) {
    // 按钮不可点击,做相应处理
} else {
    // 按钮可点击,不做处理
}
ログイン後にコピー

上記のコードでは、ID が myBtn のボタンの無効な属性値が true であるかどうかが判断されます。そうでない場合は、if ステートメントのコードが実行され、そうでない場合は、else ステートメントのコードが実行されます。

4. ボタンのdisabled属性値を設定する

ボタンのdisabled属性値を取得することに加えて、jQueryを通じてボタンのdisabled属性値を設定することもできます。以下はサンプル コードです。

$("#myBtn").prop("disabled", true); // 禁用按钮
ログイン後にコピー

上記のコードでは、ID が myBtn のボタンの disabled 属性値が true、つまりボタンが無効に設定されています。ボタンを有効にする必要がある場合は、disabled 属性値を false に設定します。以下はサンプル コードです:

$("#myBtn").prop("disabled", false); // 启用按钮
ログイン後にコピー

5. 概要

jQuery には、prop() メソッドなど、DOM 要素を操作するための便利なメソッドが多数用意されています。 prop() メソッドを通じて、DOM 要素の属性値を取得または設定できます。ボタンのdisabled属性を操作する場合、prop()メソッドを通じてボタンのdisabled属性値を取得し、disabled属性値に基づいてボタンがクリック可能かクリック不可能かを判断できます。ボタンを無効または有効にする必要がある場合は、disabled 属性値を設定することで実行できます。

以上がjqueryはボタ​​ンが無効かどうかを判断しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート