jQueryで入力ボックスを編集不可に設定する方法

Web アプリケーションでは、入力ボックスは重要な要素の 1 つです。場合によっては、ページ上に静的なテキスト情報を表示する必要がありますが、ユーザーがそれを変更することは許可されません。入力ボックスが編集可能な場合、ユーザーはテキストの内容を簡単に変更できます。この記事ではjQueryを使って入力ボックスを編集不可に設定する方法を紹介します。

1. readonly 属性の使用

readonly 属性は HTML 標準属性であり、入力ボックスを読み取り専用状態に設定できます。ユーザーは入力ボックス内のテキストを表示できますが、変更を加えることはできません。 readonly 属性を入力ボックスのラベルに追加するだけです。

<input type="text" readonly="readonly" value="只读文本" />

jQuery では、attr() メソッドを使用して入力ボックスの属性値を設定できます。例:

// 将class为readOnly的输入框设置为只读状态
$(".readOnly").attr("readonly", "readonly");

2. disabled 属性の使用

disabled 属性は HTML 標準属性でもあり、入力ボックスを無効な状態に設定できます。 readonly 属性とは異なり、disabled 属性は入力ボックスを無効にし、ユーザーはクリックまたはキーボード入力によって入力ボックスの内容を変更できません。入力ボックスのラベルに無効な属性を追加するだけです。

<input type="text" disabled="disabled" value="禁用文本" />

jQuery では、prop() メソッドを使用して入力ボックスの属性値を設定できます。例:

// 将id为disabledInput的输入框设置为不可用状态
$("#disabledInput").prop("disabled", true);

3. CSS スタイルの使用

CSS スタイルの使用は、入力ボックスを無効にする効果的な方法でもあります。入力ボックスのスタイルを設定することで、読み取り専用または使用不可のステータスを実現できます。このうち、入力ボックスの背景色、境界線、カーソル、ポインタイベントなどのスタイル属性を設定すると、入力ボックスを読み取り専用状態のように見せることができます。

/* 只读样式 */
.readOnly {
  background-color: #f5f5f5;
  border: none;
  cursor: default;
  pointer-events: none;
}
/* 不可用样式 */
.disabled {
  background-color: #f5f5f5;
  border: none;
  color: #ccc;
}

次に、jQuery で addClass() メソッドと RemoveClass() メソッドを使用して、入力ボックスの読み取り専用または使用不可のスタイルを切り替えることができます。

// 将class为readOnly的输入框添加只读样式
$(".readOnly").addClass("readOnly");
// 将class为disabled的输入框添加不可用样式
$(".disabled").addClass("disabled");

上記のメソッドを使用すると、では、入力ボックスを簡単に無効にして、ユーザーがテキストの内容を変更できないようにすることができます。実際の開発では、実際のニーズに応じて、入力ボックスの読み取り専用または使用不可の状態を実現するためのさまざまな方法を選択できます。

以上がjQueryで入力ボックスを編集不可に設定する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。