[jQuery]「フォーム」「入力」「データ」を無効にする

はじめに

システムを開発していると「フォーム」「入力」「データ」を無効にする事があります。

どれがどれだーと頭がごちゃごちゃしないようにまとめます。

環境

jQuery: 3.3.1

フォームで無効といえば３パターン

フォームで無効にするといえば下記の３パターンがあります。

1. 「フォーム」を無効にする。disabledを設定する
   <input type="text" disabled>
2. 「入力」を無効にする。readonlyを設定する
   <input type="text" readonly>
3. 「データ」を無効にする。value=""を設定する
   <input type="text" value="">

この意味合いは大きく違います。

1. 「フォーム」を無効にするとは、入力を無効にしてかつPOST送信もしません。
2. 「入力」を無効にするとは、新たな入力を無効にするが、現在入力されている値はPOST送信はされます。
3. 「データ」を無効にするとは、入力値を空にしてPOST送信します。

「フォーム」を無効にする

フォームを無効にするにはprop()を使ってdisabledを設定します。

$(element).prop('disabled', true); // trueならフォームを無効

「入力」を無効にする

入力を無効にするにはprop()を使ってreadonlyを設定します。

$(element).prop('readonly', true); // trueなら入力を無効

「データ」を無効にする

データを無効にするとはvalue値を空にします。

$(element).val(''); 

まとめ

記事の最初にフォームの無効といてば３パターンと書きましたが、考えたらもっと出てくるかも・・・（記事を書くうちに自信を無くす

とりあえずよく使うのはこの３パターンだと思うので、これでまとめとします！（力技

最後に

まとめのあとに最後がある謎。

まあぶっちゃけ本当に書きたかった記事は下記の記事です。

書いてるうちに長くなってしまったので、分離しました（SEOおおおおおお

こちらもあわせてどぞー

https://www.kabanoki.net/2896/