disabled属性とreadonly属性の相違点

  • 82
    いいね
  • 1
    コメント
この記事は最終更新日から1年以上が経過しています。

両方とも値を編集できないという点は共通していますが、以下の点が異なります。

Form送信時
disabled:値を送信しない
readonly:値を送信する

要素内のテキスト選択=表示値の選択、コピー
disabled:選択不可
readonly:選択可

選択はさせたくないけど値を送信したい場合、readonly属性を設定したタグをCSSでそれっぽく見せるより、
disabled属性を設定したタグと同じ値をhiddenタグにもたるのが一番スマートな解決策だと思います。

<input type="text" disabled="disabled" value="10" />
<input type="hidden" name="test" disabled="disabled" value="10" />

特定のtable内の集計値が欲しく、集計用のinputタグにdisabledを設定していた時に、値が送信されずに困りましたので、メモです。