目次
はじめに
システムを開発していると「フォーム」「入力」「データ」を無効にする事があります。
どれがどれだーと頭がごちゃごちゃしないようにまとめます。
環境
jQuery: 3.3.1
フォームで無効といえば３パターン
フォームで無効にするといえば下記の３パターンがあります。
- 「フォーム」を無効にする。disabledを設定する
<input type="text" disabled> - 「入力」を無効にする。readonlyを設定する
<input type="text" readonly> - 「データ」を無効にする。value=""を設定する
<input type="text" value="">
この意味合いは大きく違います。
- 「フォーム」を無効にするとは、入力を無効にしてかつPOST送信もしません。
- 「入力」を無効にするとは、新たな入力を無効にするが、現在入力されている値はPOST送信はされます。
- 「データ」を無効にするとは、入力値を空にしてPOST送信します。
「フォーム」を無効にする
フォームを無効にするにはprop()を使ってdisabledを設定します。
$(element).prop('disabled', true); // trueならフォームを無効
See the Pen フォームを無効にする by カバの樹 (@kabanoki) on CodePen.0
「入力」を無効にする
入力を無効にするにはprop()を使ってreadonlyを設定します。
$(element).prop('readonly', true); // trueなら入力を無効
See the Pen 入力を無効にする by カバの樹 (@kabanoki) on CodePen.0
「データ」を無効にする
データを無効にするとはvalue値を空にします。
$(element).val('');
See the Pen データを無効にする by カバの樹 (@kabanoki) on CodePen.0
まとめ
記事の最初にフォームの無効といてば３パターンと書きましたが、考えたらもっと出てくるかも・・・（記事を書くうちに自信を無くす
とりあえずよく使うのはこの３パターンだと思うので、これでまとめとします！（力技
最後に
まとめのあとに最後がある謎。
まあぶっちゃけ本当に書きたかった記事は下記の記事です。
書いてるうちに長くなってしまったので、分離しました（SEOおおおおおお
こちらもあわせてどぞー
