jqueryは入力ボックスを無効に設定します

フロントエンド開発では、ユーザーの誤操作を防止したり機密データを保護したりするために、入力ボックスを無効な状態に設定することが必要になることがよくあります。入力ボックスは、jQuery ライブラリを使用して簡単に無効にすることができます。

まず、無効にする必要がある入力ボックスを選択する必要があります。 jQuery セレクターを使用して、無効にする必要がある入力ボックスを選択できます。セレクターは CSS セレクターの構文を使用します。

たとえば、「inputBox」という ID を持つ入力ボックスを選択するには、次のコードを使用できます。

$("#inputBox")

次に、jQuery の「prop」メソッドを使用して無効に設定する必要があります。入力ボックスの状態。このメソッドは 2 つのパラメータを受け入れます。最初のパラメータは設定する属性で、2 番目のパラメータは属性の値です。この場合、入力ボックスを無効にするために「disabled」属性を「true」に設定する必要があります。

完全なコードは次のとおりです:

$("#inputBox").prop("disabled", true);

このコードは、ID が「inputBox」の入力ボックスを無効にします。

入力ボックスの無効な状態を元に戻す必要がある場合は、同じコードを使用できますが、「disabled」属性を「false」に設定します。

$("#inputBox").prop("disabled", false);

場合によっては、入力ボックスを無効な状態に設定することが十分に明確ではないため、CSS スタイルを使用して無効な状態を強調する必要がある場合があります。次のスタイルを使用して、無効な状態を強調することができます。

.disabled {
  background-color: #ccc;
  color: #666;
  cursor: not-allowed;
}

これらのスタイルは、背景色をグレーに、前景色を濃いグレーに設定し、マウス カーソルを「許可されていない」に設定して、無効であることを示します。入力ボックスは使用できません。

このスタイルを使用するには、入力ボックスに「無効」クラスを追加する必要があります:

$("#inputBox").addClass("disabled");

無効状態を取り消すときは、入力から「無効」クラスを削除する必要があります。 box:

$("#inputBox").removeClass("disabled");

開発では、入力ボックスを無効な状態に設定するのが一般的なタスクです。 jQuery を使用すると、これを簡単に実現でき、無効な状態に簡単に識別できるスタイルを追加できます。

以上がjqueryは入力ボックスを無効に設定しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。