こんにちは！ ライターのナナミです。
WEBサイトでお問い合わせフォームを作る時、場合によっては入力しなくてもいい項目があったりしますよね。
製品の問い合わせではないので、製品の型番は入力しなくていい
とか、そんな感じのやつです。でもどうやったら入力しなくてもいい状態にできるんだろう…という方必見！ お問い合わせフォームの項目を入力不可にする、disabledについて解説していきます。
今回の記事は、下記の流れで進めていきますね。
- 【基礎】disabledとは何か
- 【基礎】disabledを使ってみよう
- 【応用】disabledを解除しよう
- 【応用】コピペで使える入力制御のソース
お問い合わせフォームの入力制御を覚えて、よりユーザーが使いやすいフォームを作れるようになっちゃいましょう！
disabledとは？
disabledは「使用禁止」という意味の単語ですね。
コード上での意味も同じく、使用禁止状態を付与する属性です。
これをHTMLに付与すると、その項目を使用禁止、つまり入力不可にできます。そしてJavaScriptでは、disabled属性をコントロールすることができるのです。
クリックしたらdisabled属性をつける、もう一度クリックしたらdisabled属性を外す、ということもできちゃうわけですね。
disabledを使ってみよう
では、どんな使い方をするのか見ていきましょう。実際に入力不可項目を入れたフォームを作成しながら解説していくので、ぜひ実行結果で確かめながら読み進めてみてくださいね。
フォームを用意しよう
まずは元になるフォームがないと話になりませんね。今回はこんな感じの、スタンダードなフォームを用意してみました。
See the Pen form1 by 河野七海 (@kouno73) on CodePen.
という方は、リファレンスなどを参照してみてください。
http://www.htmq.com/html/form.shtml
入力不可にする項目を取得しよう
次に、どの項目を入力不可にするのかを取得していきます。今回は「会社名」の項目を入力不可にしていきましょう。
See the Pen form2 by 河野七海 (@kouno73) on CodePen.
変数triggerに、idで会社名の項目を定義しました。これでtriggerの中に、入力不可にする項目の情報が入りましたね。
という方は、下記の記事でおさらいしてみましょう！
入力不可にするコードを書こう
ここでdisabledの出番です！ 先ほど定義した変数の後ろに、.disabled=trueと入れましょう。
See the Pen form3 by 河野七海 (@kouno73) on CodePen.
「会社名」が入力できない状態になりましたね。
全体の流れをおさらいすると、下記のような感じです。
- HTMLでフォームを用意
- 入力不可にしたい要素を変数に定義
- 定義した変数に.disabled=trueをつける
これでユーザーが不要な情報を入力することもなくなりますね！
disabledを解除しよう
そもそも、絶対入力する必要がないのであれば、元から項目に入れなければOKですよね。わざわざ入力不可にするという場面は、何かの条件では入力して欲しい場面でしょう。
という時は、下記のような流れで解除していきましょう！
解除する条件を決めよう
まず、解除の条件が何かを考えてみましょう。
今回は、「企業」にチェックが入っていたら、「会社名」を入力してほしいという例で進めていきますね。どんな条件の時に解除したいかが決まったら、その条件のきっかけになる項目を取得していきます。
See the Pen form4 by 河野七海 (@kouno73) on CodePen.
変数triggerに、「企業」の項目を定義しました。
解除する条件を取得しよう
次に、解除する条件自体を設定していきます。今回はチェックしたら、つまりクリックしたらなので、クリックイベントを取得します。さらに精度を上げるために、この項目をクリックした時に、チェックがついていたらという条件も入れておくといいでしょう。
See the Pen form5 by 河野七海 (@kouno73) on CodePen.
これで準備はバッチリです。
解除するコードを書こう
さあ、入力不可を解除していきましょう！ 先ほどの条件をクリアしたら、triggerに.disabled=falseが付くようにします。
See the Pen form6 by 河野七海 (@kouno73) on CodePen.
想定通りの動きができました。実行結果でぜひ試してみてください。
おさらいすると、下記のような流れでの実装となりました。
- 入力不可を解除するきっかけになる要素を取得
- 入力不可を解除する条件を用意する
- 入力不可を解除したい要素に.disabled=falseをつける
これでより実用的な形になりましたね。
コピペで使える完成形
今回解説したコードを、さらに実用的に調整したものが下記となります。
See the Pen form7 by 河野七海 (@kouno73) on CodePen.
仕様は下記のような感じです。
- 【「会社名」が入力不可になる条件】
- ページの読み込み時
- 「個人事業主」をクリックした時にチェックがついていたら【「会社名」が入力可能になる条件】
- 「企業」をクリックした時にチェックがついていたら
このままコピペしてよし、ちょっと調整してもよし。自由に使っちゃってください！
まとめ
いかがでしたか？
いろんな関数を使う必要があるので、初めてやる人は難しく感じていたのではないでしょうか。でも、こうやってちょっとずつ紐解きながらやってみると、そんなに難しいことはありません。ぜひ活用して、ユーザーが使いやすいWEBサイトを作ってみてくださいね！
