はじめに

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

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

 

環境

jQuery: 3.3.1

 

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

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

  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ならフォームを無効

 

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

 

まとめ

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

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

 

最後に

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

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

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

こちらもあわせてどぞー

[jQuery]チェックボックスで元データを維持しながら無効にしたり有効にしたりする

 

コメントを残す

このサイトはスパムを低減するために Akismet を使っています。コメントデータの処理方法の詳細はこちらをご覧ください