jqueryでフィールドを編集不可に設定する方法

フロントエンド開発では、フォームを作成し、ユーザーにフォームの内容を入力させる必要がよくあります。フォーム内の異なるフィールドは異なる状態に設定する必要があり、一部のフィールドは読み取り専用であり、一部のフィールドは完全に無効にする必要がある場合があります。これらのシナリオでは、jQuery を使用してフィールドを編集不可能にすることができます。

1. フィールドを編集不可に設定する必要がある理由

実際のアプリケーションでは、多くの場合、フォーム内の一部のフィールドを編集不可に設定する必要があります。例:

1. ユーザーがフォームを送信した後、データのセキュリティを確保するために、ユーザーが送信された情報を変更できないようにフォーム フィールドをロックする必要があります。
2. アカウントのパスワード、携帯電話の SMS 確認コードなどの一部の機密情報は、ユーザーが変更できないように読み取り専用モードに設定する必要があります。
3. フォーム内の一部のフィールドは、特定の条件下で無効にする必要があります。たとえば、支払いを行う際に、特定の支払い方法が選択されている場合、ユーザーが支払い金額やその他の情報を変更できないようにする必要があります。

2. jQuery を使用してフィールドを編集不可に設定する方法

jQuery は、HTML ドキュメントの操作、イベント処理、アニメーションを簡略化するために使用できる非常に人気のある JavaScript ライブラリです。エフェクトやその他の操作。 jQuery では、attr() 関数を使用して、テキスト ボックス、ドロップダウン ボックス、チェック ボックス、その他の要素を編集不可の状態に設定できます。

それでは、簡単なサンプル コードを見てみましょう:

<script><br>$(document).ready(function(){<br> // テキストボックスを無効にする<br> $("input[ type ='text']").attr("disabled", "disabled");</p> <p>// ドロップダウン ボックスを無効にする <br> $("select").attr("disabled", "disabled " );</p> <p>// チェックボックスを無効にする<br> $("input[type='checkbox']").attr("disabled", "disabled");<br>});<br> </script>

ユーザー名:

パスワード:

性別:

<select>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

趣味:

<input type="checkbox" name="hobby" value="reading">阅读
<input type="checkbox" name="hobby" value="music">音乐

3. jQuery はフィールドの読み取り専用状態と無効状態を実装します

上記の例では、disabled 属性を使用してフォーム要素を無効にしました。しかし、フォーム要素を読み取り専用状態に設定する必要がある場合はどうすればよいでしょうか?このとき、readonly属性を設定することで実現できます。

readonly 属性とdisabled 属性の違いは、readonly 属性はユーザーによるフォーム要素の値の編集のみを禁止しますが、ユーザーは JS スクリプトやその他の方法を使用して要素の値を変更できることです。 disabled 属性はフォーム要素を完全に無効にし、ユーザーは要素を操作できなくなります。

次に、フィールドの読み取り専用および無効ステータスを実装するサンプル コードを見てみましょう:

< ;head>



<script><br>$(document).ready(function(){<br> // 読み取り専用 テキスト ボックス<br> $("inputtype='text'").css({"background-color": "#ccc", "border": "none"});</p> <p> // テキストボックスを無効にする<br> $("inputtype='text'").css({"background-color": "#ccc", "border": "none"});</p> <p>/ / 読み取り専用ドロップダウン ボックス<br> $("select[readonly]").css({"background-color": "#ccc", "border": "none"});</p> <p>// ドロップダウン ボックスを無効にする<br> $("select[disabled]").css({"background-color": "#ccc", "border": "none"});</p> #// 読み取り専用チェックボックス<p> $("inputtype='checkbox'").click(function(){<br></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return false;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div>});<p></p>// チェックボックスを無効にする<p> $("inputtype=' チェックボックス'").click(function(){<br></p> <div class="code" style="position:relative; padding:0px; margin:0px;"><div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">return false;</pre><div class="contentsignin">ログイン後にコピー</div></div><div class="contentsignin">ログイン後にコピー</div></div> <p>});<br>});<br></script>

 

用户名：

 

密码：

 

性别：

<select readonly>
  <option value="male">男</option>
  <option value="female">女</option>
</select>

 

爱好：

<input type="checkbox" name="hobby" value="reading" readonly>阅读
<input type="checkbox" name="hobby" value="music" readonly>音乐

 

在上面的示例代码中，我们分别设置了文本框、下拉框和复选框的只读和禁用状态。当表单元素被设置为只读或禁用状态时，我们可以通过改变其样式以及绑定相应的事件来达到不同的效果。

总结

本文介绍了如何使用jQuery来设置表单元素的不可编辑状态，实现的方法包括禁用、只读、禁用样式等。在前端开发中，通过掌握这些方法，我们可以更好地控制表单元素的状态，提高用户体验及数据安全性。

以上がjqueryでフィールドを編集不可に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。