【JavaScript入門】フォームの入力制御!disabledで入力不可にしよう

こんにちは! ライターのナナミです。

WEBサイトでお問い合わせフォームを作る時、場合によっては入力しなくてもいい項目があったりしますよね。

個人事業主にチェックが入っていたら、会社名や部署は入力しなくていい
製品の問い合わせではないので、製品の型番は入力しなくていい

とか、そんな感じのやつです。でもどうやったら入力しなくてもいい状態にできるんだろう…という方必見! お問い合わせフォームの項目を入力不可にする、disabledについて解説していきます。

今回の記事は、下記の流れで進めていきますね。

  • 【基礎】disabledとは何か
  • 【基礎】disabledを使ってみよう
  • 【応用】disabledを解除しよう
  • 【応用】コピペで使える入力制御のソース

お問い合わせフォームの入力制御を覚えて、よりユーザーが使いやすいフォームを作れるようになっちゃいましょう!

disabledとは?

disabledは「使用禁止」という意味の単語ですね。
コード上での意味も同じく、使用禁止状態を付与する属性です。

disabled

これをHTMLに付与すると、その項目を使用禁止、つまり入力不可にできます。そしてJavaScriptでは、disabled属性をコントロールすることができるのです。

disabled2

クリックしたらdisabled属性をつける、もう一度クリックしたらdisabled属性を外す、ということもできちゃうわけですね。

disabledを使ってみよう

では、どんな使い方をするのか見ていきましょう。実際に入力不可項目を入れたフォームを作成しながら解説していくので、ぜひ実行結果で確かめながら読み進めてみてくださいね。

フォームを用意しよう

まずは元になるフォームがないと話になりませんね。今回はこんな感じの、スタンダードなフォームを用意してみました。

See the Pen form1 by 河野七海 (@kouno73) on CodePen.0

そもそもフォームの作り方がよくわからないよ…

という方は、リファレンスなどを参照してみてください。
http://www.htmq.com/html/form.shtml

入力不可にする項目を取得しよう

次に、どの項目を入力不可にするのかを取得していきます。今回は「会社名」の項目を入力不可にしていきましょう。

See the Pen form2 by 河野七海 (@kouno73) on CodePen.0

変数triggerに、idで会社名の項目を定義しました。これでtriggerの中に、入力不可にする項目の情報が入りましたね。

変数の定義ってなんだっけ…

という方は、下記の記事でおさらいしてみましょう!

JavaScriptの変数って何? varで宣言や初期化をしてみよう!
更新日 : 2019年4月26日

入力不可にするコードを書こう

ここでdisabledの出番です! 先ほど定義した変数の後ろに、.disabled=trueと入れましょう。

See the Pen form3 by 河野七海 (@kouno73) on CodePen.0

「会社名」が入力できない状態になりましたね。

全体の流れをおさらいすると、下記のような感じです。

  • HTMLでフォームを用意
  • 入力不可にしたい要素を変数に定義
  • 定義した変数に.disabled=trueをつける

これでユーザーが不要な情報を入力することもなくなりますね!

disabledを解除しよう

そもそも、絶対入力する必要がないのであれば、元から項目に入れなければOKですよね。わざわざ入力不可にするという場面は、何かの条件では入力して欲しい場面でしょう。

入力不可にしたのはいいけど、「企業」にチェックが入っていたら解除したい…

という時は、下記のような流れで解除していきましょう!

解除する条件を決めよう

まず、解除の条件が何かを考えてみましょう。

今回は、「企業」にチェックが入っていたら、「会社名」を入力してほしいという例で進めていきますね。どんな条件の時に解除したいかが決まったら、その条件のきっかけになる項目を取得していきます。

See the Pen form4 by 河野七海 (@kouno73) on CodePen.0

変数triggerに、「企業」の項目を定義しました。

解除する条件を取得しよう

次に、解除する条件自体を設定していきます。今回はチェックしたら、つまりクリックしたらなので、クリックイベントを取得します。さらに精度を上げるために、この項目をクリックした時に、チェックがついていたらという条件も入れておくといいでしょう。

See the Pen form5 by 河野七海 (@kouno73) on CodePen.0

これで準備はバッチリです。

解除するコードを書こう

さあ、入力不可を解除していきましょう! 先ほどの条件をクリアしたら、triggerに.disabled=falseが付くようにします。

See the Pen form6 by 河野七海 (@kouno73) on CodePen.0

想定通りの動きができました。実行結果でぜひ試してみてください。

おさらいすると、下記のような流れでの実装となりました。

  • 入力不可を解除するきっかけになる要素を取得
  • 入力不可を解除する条件を用意する
  • 入力不可を解除したい要素に.disabled=falseをつける


これでより実用的な形になりましたね。

コピペで使える完成形

今回解説したコードを、さらに実用的に調整したものが下記となります。

See the Pen form7 by 河野七海 (@kouno73) on CodePen.0

仕様は下記のような感じです。

  • 【「会社名」が入力不可になる条件】
  • ページの読み込み時
  • 「個人事業主」をクリックした時にチェックがついていたら【「会社名」が入力可能になる条件】
  • 「企業」をクリックした時にチェックがついていたら

このままコピペしてよし、ちょっと調整してもよし。自由に使っちゃってください!

まとめ

いかがでしたか?

いろんな関数を使う必要があるので、初めてやる人は難しく感じていたのではないでしょうか。でも、こうやってちょっとずつ紐解きながらやってみると、そんなに難しいことはありません。ぜひ活用して、ユーザーが使いやすいWEBサイトを作ってみてくださいね!

LINEで送る
Pocket

最短でエンジニアを目指すなら侍エンジニア塾

cta_under_bnr

侍エンジニア塾は業界で初めてマンツーマンレッスンを始めたプログラミングスクールです。これまでの指導実績は16,000名を超え、未経験から数多くのエンジニアを輩出しています。

あなたの目的に合わせてカリキュラムを作成し、現役エンジニア講師が専属であなたの学習をサポートするため効率よく学習を進めることができますよ。

無理な勧誘などは一切ありません。まずは無料体験レッスンを受講ください。

無料体験レッスンの詳細はこちら

書いた人

ナナミ

ナナミ

1991年生まれ。
文系大学卒業後、フリーターを経てフロントエンジニアになる。
HTML、CSS、 jQueryなどのコーディングやCMS設計に従事。
文系からエンジニアを目指す人にもわかりやすい記事を目指して、日々精進中。
体は日本酒でできている。

おすすめコンテンツ

あなたにぴったりなプログラミング学習プランを無料で診断!

プログラミング学習の効率を劇的に上げる学習メソッドを解説