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

2019年4月9日

はじめに

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

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

 

環境

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]チェックボックスで元データを維持しながら無効にしたり有効にしたりする

 

  • この記事を書いた人

カバノキ

印刷会社のWEB部隊に所属してます。 WEB制作に携わってから、もう時期10年になります。 普段の業務では、PHPをメインにサーバーサイドの言語を扱っています。 最近のお気に入りはJavascriptです。 Vue.jsを狂喜乱舞しながら、社内に布教中です。

-jQuery
-, , ,