指定時間後にチェックできなくなるチェックボックスを作る方法
指定時間後にチェックできなくなるチェックボックスを作る方法を紹介します。このサンプルでは、ページを表示してから5秒間はチェックボックスを自由に操作でき、5秒が経過すると自動的に選択できない状態へ切り替わります。HTML・CSS・JavaScriptのみで実装し、外部ライブラリは使用しません。
操作できる時間内であれば、チェックを付けたり外したりできます。指定時間が経過するとJavaScriptでチェックボックスのdisabledプロパティを有効にし、その時点のチェック状態を保持したまま操作できなくします。受付時間を限定した選択項目や、一定時間だけ変更を受け付ける設定項目などに利用できます。
チェックボックスのラベルや説明文はHTMLから変更でき、CSSでは横幅、余白、背景色、枠線、角丸などを調整できます。JavaScriptでは操作できなくなるまでの待機時間を変更できます。レスポンシブにも対応しているため、スマートフォン・タブレット・PCで利用できます。
免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。
デモ
3秒以内であれば、チェックを付けたり外したりできます。
現在は選択できます。
3秒が経過するとチェックボックスを操作できなくなります。「もう一度確認する」を押すと、再び3秒間操作できます。
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コード -->
<meta charset="UTF-8">
<!-- スマートフォン対応 -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- ページタイトル -->
<title>指定時間後にチェックできなくなるチェックボックス</title>
<!-- CSSファイル -->
<link rel="stylesheet" href="style.css">
</head>
<body>
<!-- チェックボックス全体 -->
<div class="timed-checkbox_wrap">
<!-- タイトル -->
<div class="timed-checkbox_title">
3秒後に選択できなくなるチェックボックス
</div>
<!-- 説明文 -->
<p class="timed-checkbox_text">
3秒以内であれば、チェックを付けたり外したりできます。
</p>
<!-- チェックボックス表示エリア -->
<div class="timed-checkbox_box">
<!-- チェックボックスとラベル -->
<label class="timed-checkbox_label">
<input
class="timed-checkbox_input"
type="checkbox"
name="notification">
お知らせを受け取る
</label>
</div>
<!-- 操作状態を表示するメッセージ -->
<p class="timed-checkbox_status">
現在は選択できます。
</p>
</div>
<!-- JavaScriptファイル -->
<script src="script.js"></script>
</body>
</html>サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLではチェックボックス、ラベル、説明文、現在の操作状態を表示するメッセージを作成します。CSSではチェックボックス全体の横幅や余白、枠線、角丸、チェック時の色、無効時の見た目などを設定します。
JavaScriptでは、ページを表示してから3秒後にチェックボックスへdisabledを設定し、それ以降はチェックを付けたり外したりできない状態へ変更します。同時に、操作状態を表示するメッセージも「3秒が経過したため選択できません。」へ変更します。
3秒が経過するまでは通常のチェックボックスとして操作できます。3秒後に無効化された時点でチェックされていた場合はその状態のまま保持され、チェックされていなかった場合もその状態のまま操作できなくなります。
sample/
├── index.html
├── style.css
└── script.js
各ファイルの役割
index.htmlはチェックボックス全体を構成するファイルです。「3秒後に選択できなくなるチェックボックス」のタイトル、説明文、「お知らせを受け取る」のラベル、初期状態で表示する「現在は選択できます。」のメッセージを変更できます。
style.cssはチェックボックス全体のデザインを設定するファイルです。全体の最大横幅、余白、背景色、枠線、角丸、ラベルの文字サイズ、チェックボックスの大きさ、チェック時の色、無効時のラベル色などを変更できます。
script.jsは指定時間後にチェックボックスを操作できなくするファイルです。ページを表示してから3秒後にdisabledを有効にし、チェックボックスを操作できない状態へ変更します。同時に状態メッセージを「3秒が経過したため選択できません。」へ変更します。
設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置します。3つのファイルを同じ階層へ保存したあと、sample/index.htmlをブラウザで開いてください。
ページを表示してから3秒間は「お知らせを受け取る」のチェックボックスを自由に操作できます。3秒が経過するとチェックボックスが無効になり、それ以降はチェック状態を変更できなくなります。
カスタマイズできる内容
index.htmlではタイトル、説明文、チェックボックスのラベル、初期状態のメッセージを変更できます。チェックボックスのname="notification"も、実際のフォーム内容に合わせて変更できます。
style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、チェックボックス表示エリアのデザイン、チェックボックスのサイズ、チェック時の色、ラベルの文字サイズ、無効時の文字色、状態メッセージの色などを変更できます。
script.jsではsetTimeoutに指定している3000を変更することで、チェックボックスを操作できなくするまでの時間を変更できます。
数値調整
script.js
3000
ページを表示してからチェックボックスを操作できなくするまでの待機時間です。3000は3秒を表します。
1000 → 1秒後
3000 → 3秒後
5000 → 5秒後
10000 → 10秒後
例えば5秒間だけチェックできるようにしたい場合は、script.jsの3000を5000へ変更します。値を大きくすると操作できる時間が長くなり、小さくすると早く操作できなくなります。
style.css
max-width:700px;
チェックボックス全体の最大横幅です。値を大きくすると横に広がり、小さくするとコンパクトになります。
margin:40px auto;
全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。
padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。
border-radius:18px;
全体を囲む部分の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。
font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きく表示されます。
padding:20px;
チェックボックス表示エリアの内側余白です。値を大きくするとチェックボックスと枠線の間隔が広がります。
border-radius:12px;
チェックボックス表示エリアの角丸です。値を大きくすると丸みが強くなります。
gap:12px;
チェックボックスと「お知らせを受け取る」の文字との間隔です。値を大きくすると両者の間隔が広がります。
width:20px;・height:20px;
チェックボックスの大きさです。値を大きくするとチェックボックスが大きくなり、小さくすると小さくなります。
margin:16px 0 0;
状態メッセージの上側余白です。16pxを大きくするとチェックボックス表示エリアとの間隔が広がります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:700pxにより、画面幅に合わせて全体が縮小されます。
また、画面幅640px以下ではページ全体の余白を24px 12px、チェックボックス全体の余白を24px 18px、チェックボックス表示エリアの余白を18pxへ変更しています。スマートフォン・タブレット・PCで利用できます。
コメント