【完全版】JavaScript と jQuery で input 要素の readonly 属性を設定する方法

以下のコードは、JavaScript を使って input 要素に readonly 属性を追加する方法です。

// 1. 要素を取得
const inputElement = document.querySelector('#input-id');

// 2. `readonly` 属性を設定
inputElement.readOnly = true;

jQuery を使っても、input 要素に readonly 属性を追加することができます。

// 1. 要素を取得
const $inputElement = $('#input-id');

// 2. `readonly` 属性を設定
$inputElement.prop('readonly', true);

• jQuery を既にプロジェクトで使用している場合は、jQuery の方法を使う方が簡潔に記述できます。
• jQuery を使用していない場合は、JavaScript の方法を使う方がシンプルで分かりやすいです。

• HTML の readonly 属性を直接記述する
• JavaScript の setAttribute() メソッドを使う

例

<input id="input-id" readonly>

// 要素を取得
const inputElement = document.querySelector('#input-id');

// `readonly` 属性を設定
inputElement.setAttribute('readonly', 'true');

注意事項

• readonly 属性を設定すると、ユーザーは入力欄を編集することができなくなります。
• readonly 属性は、フォームの送信を妨げるものではありません。

HTML

<input type="text" id="input-id">
<button id="button-id">Readonly 属性を追加</button>

JavaScript

// 要素を取得
const inputElement = document.querySelector('#input-id');
const buttonElement = document.querySelector('#button-id');

// ボタンクリックイベントを設定
buttonElement.addEventListener('click', () => {
  // `readonly` 属性を設定
  inputElement.readOnly = true;
});

動作

• ページが読み込まれると、input 要素は編集可能です。
• Readonly 属性を追加 ボタンをクリックすると、input 要素が readonly になり、編集できなくなります。

このコードをどのように使うか？

このコードを参考に、自分のプロジェクトに合わせて input 要素に readonly 属性を追加してみてください。

input 要素に readonly 属性を追加する他の方法

<input type="text" id="input-id" readonly>

// 要素を取得
const inputElement = document.querySelector('#input-id');

// `readonly` 属性を設定
inputElement.setAttribute('readonly', 'true');

これらの方法は、上記で紹介した方法よりも簡潔ですが、コードの可読性が低くなります。

• ライブラリを使用する
• 条件分岐を使って readonly 属性を設定する

readonly 属性を設定するライブラリはたくさんあります。 例えば、以下のようなライブラリがあります。

// 条件分岐を使って `readonly` 属性を設定
if (condition) {
  inputElement.readOnly = true;
} else {
  inputElement.readOnly = false;
}

この方法は、状況によって readonly 属性を設定したい場合に有効です。

プロジェクトの要件に合わせて、最適な方法を選択してください。