inputのdisabled属性とreadonly属性で入力欄を入力不可にする

この記事ではフォームのinputの入力欄を入力不可にする方法をご紹介します。

inputの入力欄を入力不可は次の2つあります。

これらを付与するとユーザーは入力欄に値を入力・変更することができなくなります。

しかし、disabled属性とreadonly属性には次の項目で違いがあります。

• フォーカス
• タブ移動
• value値の送信
• サポートする要素

これらの違いを理解して、disabled属性とreadonly属性を使い分ける必要があります。

これらの違いを踏まえつつ、disabled属性とreadonly属性の使い方を説明します。

disabled 属性 と readonly 属性の違い

input要素にdisabled属性とreadonly属性のどちらを付与してもユーザーは値を変更することができなくなります。

しかし、disabled属性とreadonly属性には次のように違いがあります。

「規制」という意味ではdisabled属性の方が強く、付与できる要素はdisabled属性の方が多いです。
disabled属性は「選択不能指定」で、readonly属性は「読み出し専用指定」となっています。

disabled属性とreadonly属性の挙動の違いは次のテキストボックスで確認できます。

disabled属性を使って「選択不能指定」で入力を規制する

「選択不能指定」で入力を規制する場合はdisable属性を以下のように使って規制します。

<input
　name="a"
　type="text"
　value="disable属性で入力規制"
　disabled
/>

disabled属性は値を指定しなくても「選択不能指定」することができます。
disabled="disabled"のようにしても問題ありません。

The disabled attribute is a boolean attribute.

disabled属性はboolean属性です。

HTML <input> disabled Attribute

disabled属性は以下のような特徴があります。

javascriptで動的にdisabled属性を付与して入力規制する

「動物は好きですか？」のチェックボックスにチェックをすると、セレクトボックスで動物を選べるようになります。

javascriptではdisabled属性にbooleanを入れています。

<label>
  動物は好きですか？
  <input id="js-like-animals" type="checkbox"/>
</label>
<br>
<label for="js-animal-select">好きな動物:</label>
<select id="js-animal-select" disabled>
  <option value="dog">いぬ</option>
  <option value="cat">ねこ</option>
  <option value="sheep">ひつじ</option>
  <option value="tiger">とら</option>
</select>

<script>
  var likeAnimalsCheckbox = document.getElementById("js-like-animals");
  var animalSelect = document.getElementById("js-animal-select");
  
  likeAnimalsCheckbox.addEventListener("change", function(event) {
    if (event.target.checked) {
  animalSelect.disabled = false;
    } else {
  animalSelect.disabled = true;
    }
  }, false);
</script>

jQueryで動的にdisabled属性を付与して入力規制する

jQueryではattrまたはpropを使ってdisabled属性を付与したり外したりします。

<label>
    動物は好きですか？
    <input id="jq-like-animals" type="checkbox"/>
</label>
<br>
<label for="animal-select">好きな動物:</label>
<select id="jq-animal-select" disabled>
  <option value="dog">いぬ</option>
  <option value="cat">ねこ</option>
  <option value="sheep">ひつじ</option>
  <option value="tiger">とら</option>
</select>

<script>
  var likeAnimalsCheckbox = jQuery('#jq-like-animals');
  var animalSelect = jQuery("#jq-animal-select");
  
  likeAnimalsCheckbox.change(function(event) {
  if (event.target.checked) {
    animalSelect.attr('disabled', false);
    # animalSelect.prop("disabled", false);
  } else {
    animalSelect.attr('disabled', true);
    # animalSelect.prop("disabled", true);
  }
  }, false);
</script>

jQueryでフォームのボタンを有効・無効にするではそれぞれのメソッドの操作方法を詳しく紹介しています。

readonly属性を使って「読み出し専用指定」で入力を規制する

「読み出し専用指定」で入力を規制する場合はdisable属性を以下のように使って規制します。

<input
　name="a"
　type="text"
　value="readonly属性で入力規制"
　readonly
/>

readonly属性は値を指定しなくても「読み出し専用指定」することができます。
readonly="readonly"のようにしても問題ありません。

The readonly attribute is a boolean attribute.

readonly属性はboolean属性です。

HTML <input> readonly Attribute

readonly属性を指定して「読み出し専用指定」をすると入力フィールドを変更することはできませんが、ユーザーはクリックしてフォーカスすることができるため、値をコピーすることができます。

readonly属性は以下のような特徴があります。

まとめ

input要素にdisabled属性とreadonly属性のどちらを付与してもユーザーは値を変更することができなくなりますが、次のような違いがあります。

input要素にdisabled属性やreadonly属性を付与する場合はこれらの特徴をよく理解して取り扱う必要がありますが、一つ一つの確認しながら作っていくととても時間がかかります。

そこでメンターや講師がいるとても助けになってくれるので、おすすめのプログラミングスクールを置いておきます。

DIVE INTO CODE

450,000円の補助金で実質料金が197,800円

Webエンジニアコースのフルタイムの通常の料金は647,800円が45万円の補助金で実質料金が197,800円! 転職時の書類選考などの選考免除の企業がある。 講師たちが優秀！就職・転職サポートが手厚い！

口コミや評判のまとめ記事へ公式サイトへ

tech boost

350,000円〜

必要な技術だけ学んで最短距離で卒業できる。 オンラインの質問対応は早く学習しやすい。 料金が手頃、現役エンジニアのみ、あなた専用のカリキュラムで完走率が高い。

口コミや評判のまとめ記事へ公式サイトへ