inputのreadonlyとdisabledで混乱したので整理。
readonlyとdisabledの違い
readonlyとdisabledは機能上は以下のような違いがある。
readonly は論理属性で、存在する場合、要素が変更可能ではなくなり、ユーザーがそのコントロールを編集できなくなります。
HTML 属性: readonly - HTML | MDN
disabled は論理属性で、存在する場合、その要素は変更不可、フォーカス不可、フォームへの送信不可となります。
HTML 属性: disabled - HTML | MDN
ただ、これだけだとあんまり分からないので具体的な例を考えてみる。
具体的なユースケースの違い
readonlyのユースケース
具体的なreadonlyのユースケースとして、郵便番号を入力したら自動で住所が入力されるパターン が考えられる。
この場合、自動入力された住所情報自体は有効である (サーバーに送信される)。なのでreadonlyになる。
disabledのユースケース
disabledの具体的なユースケースとしては、「一戸建て」「マンション」で一戸建てを選んだときの「マンション名」フィールド が考えられる。
この場合、一戸建てなのだから マンション名は使われない無効な情報である。 なのでdisabledになる。
まとめ
- readonly: 入力を受け付けないけど 値自体は使われる状態 (自動入力の住所)
- disabled: 入力を受け付けないし 値も使われない状態 (一戸建てのマンション名)
ちなみにdisabledは基本的にreadonlyを包含してるので、つける際はどちらかで1つで良い (両方つけるとdisabledをつけた時とだいたい同じ挙動になるはず)。
