チェックボックスにチェックが入っているかを判定し、サブミットボタンを有効にする方法は?

# WEB制作

2020.01.25

今回もフォームについて――、フォームってHTMLの中で1番やっかいですよね。
とは言え、お問い合わせページ 等、フォームがないサイトなんて存在しないので、
その需要に答えられるように勉強しました。

さて今回はチェックボックスにチェックが入っているかを判定し、サブミットボタンを有効にする方法を調べました。

チェックボックスにチェックが入っているかを判定し、サブミットボタンを有効にする方法は?

言葉だけだとわかりにくいので、実際に作成しました。

See the Pen
vYYaRBw
by sank (@sank_f)
on CodePen.

こんな感じ。

「個人情報を○○で使用しますが大丈夫ですか?」
「うん、いいよ」(チェック)
「じゃあ、送信していいですよ」(ボタンを利用できるようにする)

「個人情報を○○で使用しますが大丈夫ですか?」
「え、だめだよ」(チェックしない)
「じゃあ、送信させないよ」(ボタンを利用できない)

こんなフォームよく見ますよね。

これはチェックボックスにチェックが入っているかを判定し、ボタンを利用できるように、できないように、設定しています。

[jQueryで簡単]ファームの送信をコントロールする

それではソースとともに解説を。
今回はわかりやすいようにアラートで判定を出しました。
上の実演で試してみてください。

こんな感じになりました。
重要なのは、

disabled=”disabled”を使用し、デフォルトでサブミットボタンを無効にしておくこと。

フォームはなにかとセキュア面も大切になってきますので、この仕様も使う時が来ると思います。
その際はぜひ参考にしてみてください。

webサイトの制作、お任せください。

あくまでも基本料金になりますので、まずはご連絡ください。

コーディング

トップページ
(ヘッダー・フッター含む)

¥8,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥4,000~

ランディングページ

¥15,000~

※アニメーションはオプション料金

デザイン

トップページ
(ヘッダー・フッター含む)

¥20,000~

コンテンツページ(1P)
(ヘッダー・フッター含まない)

¥5,000~

ランディングページ

¥20,000~

※コーディングとのセット料金

サイト構築

10ページ
(お問合せページを含まない)

¥100,000~

20ページ
(お問合せページを含まない)

¥175,000~

Wordpress導入

(上記)+¥50,000~

※お問合せページは¥10,000~