jqueryは読み取り専用を追加します

フロントエンド ページを開発する場合、ユーザーによる誤操作やデータの悪意のある改ざんを防ぐために、特定のフォーム要素を読み取り専用ステータスに設定する必要がある場合があります。 jQuery は、フロントエンド ページをより効率的かつ便利に実装できるようにする人気の JavaScript ライブラリです。この記事ではjQueryを使ってフォーム要素にreadonly属性を追加する方法を紹介します。

1.読み取り専用属性とは何ですか?

readonly 属性は通常、フォーム要素の入力範囲を制限するために使用されます。フォーム要素が読み取り専用ステータスに設定されている場合、ユーザーはそれを変更できず、要素の値の表示のみが可能です。これは、特定の機密データを表示したり、ユーザーのアクションを制限したりする場合に役立ちます。

HTML では、form 要素に readonly 属性を設定することで読み取り専用ステータスを実現できます。例:

<input type="text" name="username" value="johndoe" readonly>

上記のコード スニペットでは、「username」という名前のテキスト ボックスが読み取り専用ステータスに設定され、デフォルトで入力ボックスに「johndoe」が表示されます。ユーザーが入力ボックスの内容を変更しようとしても、変更は反映されません。

2. jQuery を使用して読み取り専用属性を設定する方法

ネイティブ HTML 属性とは異なり、jQuery で属性値を変更するには prop() メソッドを使用する必要があります。 prop() は 2 つのパラメータを受け入れます。最初のパラメータは変更する属性の名前で、2 番目のパラメータは属性に割り当てる値です。読み取り専用プロパティの場合、2 番目のパラメーターを true または false に設定して、読み取り専用かどうかを制御する必要があります。

たとえば、次のコード スニペットは、「password」という名前の入力ボックスを読み取り専用状態に設定します。

$('[name="password"]').prop('readonly', true);

上記のコードでは、まず jQuery のセレクターを使用して入力ボックスを見つけます。 「password」という名前を付け、prop() メソッドを通じて readonly 属性を true に設定して、読み取り専用ステータスを実現します。読み取り専用状態を解除したい場合は、2 番目のパラメータを false に設定するだけです。

3. attr() メソッドを使用して読み取り専用属性を設定する

jQuery の初期バージョンでは、通常、HTML 要素の属性値を変更するために attr() メソッドが使用されていました。 prop() メソッドは attr() メソッドよりも一般的に使用されますが、古いバージョンの jQuery を使用している場合は、attr() メソッドを使用して読み取り専用属性を設定できます。

たとえば、次のコード スニペットは、「phone」という名前の入力ボックスを読み取り専用状態に設定します。

$('[name="phone"]').attr('readonly', true);

prop() メソッドと同様に、attr( ) メソッド 2 番目のパラメーターを false に設定すると、読み取り専用状態が解除されます。

4. 結論

フロントエンド開発では、ユーザーの誤操作やデータの悪意のある改ざんを防ぐために、特定のフォーム要素を読み取り専用ステータスに設定する必要がある場合があります。これは、jQuery を使用するとより簡単に実現できます。この記事では、jQuery の prop() メソッドと attr() メソッドを使用して readonly 属性を設定する方法を紹介しました。新しいバージョンの jQuery を使用しているか、古いバージョンの jQuery を使用しているかに関係なく、ニーズに応じて適切な方法を選択できます。

以上がjqueryは読み取り専用を追加しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。