指定時間後に選択できなくなるラジオボタンを作る方法【HTML/CSS/JavaScript・サンプルコード付き】

指定時間後に選択できなくなるラジオボタンを作る方法

指定時間後に選択できなくなるラジオボタンを作る方法を紹介します。このサンプルでは、ページを表示してから3秒間は複数の選択肢から自由に1つを選択でき、3秒が経過するとすべてのラジオボタンが自動的に操作できない状態へ切り替わります。一定時間だけ回答や設定の変更を受け付け、その後は選択内容を変更できないようにしたい場合に利用できる実装です。

アンケートや簡単な回答フォーム、会員サイトの設定選択、管理画面の選択項目など、一定時間内だけ選択を受け付けたい場面で活用できます。JavaScriptのsetTimeoutを使用してページ表示からの時間を計測し、指定時間が経過すると各ラジオボタンへdisabledを設定します。時間内に選択した項目はそのまま維持され、3秒後は別の項目へ切り替えられなくなります。

選択肢の文字はHTMLから変更でき、CSSではラジオボタンを囲む枠線、余白、角丸、背景色、文字サイズなどを調整できます。また、選択できなくなるまでの待機時間はJavaScriptの数値を変更することで自由に設定できます。レスポンシブ対応のため、スマートフォン・タブレット・PCでも利用しやすい構成です。

コードについて 本記事のコードはサンプルコードです。ご利用前に必ず動作確認を行ってください。

免責事項 本コードの利用により発生した損害について、当サイトは一切の責任を負いません。

デモ

3秒後に選択できなくなるラジオボタン

3秒以内であれば複数の選択肢から1つを選択できます。

HTML CSS JavaScript PHP

現在は選択できます。

ページ表示から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="radio-button-disable-after-time_wrap">

    <!-- タイトル -->
    <div class="radio-button-disable-after-time_title">
      3秒後に選択できなくなるラジオボタン
    </div>

    <!-- 説明文 -->
    <p class="radio-button-disable-after-time_text">
      3秒以内であれば複数の選択肢から1つを選択できます。
    </p>

    <!-- HTML -->
    <label class="radio-button-disable-after-time_label">
      <input
        class="radio-button-disable-after-time_input"
        type="radio"
        name="language"
        value="html"
        checked>
      <span class="radio-button-disable-after-time_name">
        HTML
      </span>
    </label>

    <!-- CSS -->
    <label class="radio-button-disable-after-time_label">
      <input
        class="radio-button-disable-after-time_input"
        type="radio"
        name="language"
        value="css">
      <span class="radio-button-disable-after-time_name">
        CSS
      </span>
    </label>

    <!-- JavaScript -->
    <label class="radio-button-disable-after-time_label">
      <input
        class="radio-button-disable-after-time_input"
        type="radio"
        name="language"
        value="javascript">
      <span class="radio-button-disable-after-time_name">
        JavaScript
      </span>
    </label>

    <!-- PHP -->
    <label class="radio-button-disable-after-time_label">
      <input
        class="radio-button-disable-after-time_input"
        type="radio"
        name="language"
        value="php">
      <span class="radio-button-disable-after-time_name">
        PHP
      </span>
    </label>

    <!-- 状態表示 -->
    <p
      class="radio-button-disable-after-time_status"
      data-radio-disable-status>
      現在は選択できます。
    </p>

  </div>

  <!-- JavaScriptファイル -->
  <script src="script.js"></script>

</body>
</html>

/* ページ全体 */
body{
  margin:0; /* ブラウザ標準の外側余白を削除 */
  padding:40px 20px; /* 上下40px・左右20px。値を大きくすると画面端との間隔が広がる */
  background:#ffffff; /* ページ全体の背景色 */
  color:#111827; /* ページ全体の基本文字色 */
  font-family:sans-serif; /* ページ全体で使用するフォント */
}

/* ラジオボタン全体 */
.radio-button-disable-after-time_wrap{
  width:100%; /* 画面幅に合わせて横幅を縮小 */
  max-width:640px; /* 最大横幅。値を大きくすると全体が横に広がる */
  margin:40px auto; /* 上下40pxの余白を付けて左右中央へ配置 */
  padding:32px; /* 内側余白。値を大きくすると内容と枠線の間隔が広がる */
  border:1px solid #dfe7f0; /* 全体を囲む枠線 */
  border-radius:18px; /* 角丸。値を大きくすると丸みが強くなる */
  background:#f8fafc; /* 全体の背景色 */
  box-sizing:border-box; /* paddingとborderを横幅へ含める */
}

/* タイトル */
.radio-button-disable-after-time_title{
  margin:0 0 12px; /* 下側12pxの余白 */
  text-align:center; /* タイトルを中央揃えにする */
  font-size:22px; /* タイトルの文字サイズ */
  font-weight:700; /* タイトルを太字にする */
  color:#111827; /* タイトルの文字色 */
}

/* 説明文 */
.radio-button-disable-after-time_text{
  margin:0 0 24px; /* 下側24pxの余白 */
  text-align:center; /* 説明文を中央揃えにする */
  color:#4b5563; /* 説明文の文字色 */
  line-height:1.8; /* 行間。値を大きくすると行間が広がる */
}

/* 選択項目 */
.radio-button-disable-after-time_label{
  display:flex; /* ラジオボタンと文字を横並びにする */
  align-items:center; /* 上下中央へ揃える */
  gap:12px; /* ラジオボタンと文字の間隔 */
  padding:14px 16px; /* 上下14px・左右16pxの内側余白 */
  margin-bottom:14px; /* 各項目の下側余白 */
  border:1px solid #dfe7f0; /* 項目を囲む枠線 */
  border-radius:10px; /* 項目の角丸 */
  background:#ffffff; /* 項目の背景色 */
  cursor:pointer; /* マウスポインターを指型にする */
}

/* ラジオボタン */
.radio-button-disable-after-time_input{
  width:20px; /* ラジオボタンの横幅 */
  height:20px; /* ラジオボタンの高さ */
  accent-color:#0b6bff; /* 選択時の色 */
  cursor:pointer; /* マウスポインターを指型にする */
}

/* 選択肢の文字 */
.radio-button-disable-after-time_name{
  font-size:16px; /* 文字サイズ */
  font-weight:700; /* 文字を太字にする */
  color:#111827; /* 文字色 */
}

/* 操作できないラジオボタン */
.radio-button-disable-after-time_input:disabled{
  cursor:not-allowed; /* 操作できないことを示すカーソル */
}

/* 操作できない選択項目 */
.radio-button-disable-after-time_label:has(
  .radio-button-disable-after-time_input:disabled
){
  opacity:.55; /* 無効状態を薄く表示する */
  cursor:not-allowed; /* 操作できないことを示すカーソル */
}

/* 状態表示 */
.radio-button-disable-after-time_status{
  margin:10px 0 0; /* 上側10pxの余白 */
  text-align:center; /* 状態表示を中央揃えにする */
  color:#2563eb; /* 状態表示の文字色 */
  font-weight:700; /* 状態表示を太字にする */
}

/* 画面幅640px以下 */
@media(max-width:640px){

  /* ラジオボタン全体 */
  .radio-button-disable-after-time_wrap{
    padding:20px; /* スマートフォンでは内側余白を小さくする */
  }

}

// すべてのラジオボタンを取得
const radioDisableInputs=
  document.querySelectorAll(
    ".radio-button-disable-after-time_input"
  );

// 状態表示を取得
const radioDisableStatus=
  document.querySelector(
    "[data-radio-disable-status]"
  );

// ページ表示から3秒後に実行
setTimeout(function(){

  // すべてのラジオボタンを操作できない状態にする
  radioDisableInputs.forEach(function(input){

    input.disabled=true;

  });

  // 状態表示を変更
  radioDisableStatus.textContent=
    "3秒が経過したため選択できません。";

},
3000 // 3000は3秒。値を大きくすると選択できる時間が長くなり、小さくすると短くなる
);

コードをコピーする場合 使用するコードのタブを選び、「このタブをコピー」をクリックすると、現在表示中のコードをコピーできます。
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。

ファイル構成と設置方法

このサンプルはHTML・CSS・JavaScriptの3ファイルで構成されています。HTMLでは4つのラジオボタンと状態表示を作成し、CSSでは選択項目のサイズ、余白、色、角丸、無効時の表示などを設定します。JavaScriptではページ表示から3秒後にすべてのラジオボタンへdisabledを設定し、それ以降は選択できない状態へ切り替えます。

sample/
    ├── index.html
    ├── style.css
    └── script.js

各ファイルの役割
index.htmlはラジオボタン全体を構成するファイルです。タイトル、説明文、HTML・CSS・JavaScript・PHPの選択肢、初期選択される項目、時間経過前の状態表示を変更できます。各ラジオボタンには同じname="language"を指定しているため、複数の選択肢から1つだけ選択できます。

style.cssはラジオボタン全体のデザインを設定するファイルです。全体の横幅、余白、背景色、枠線、角丸、文字サイズ、ラジオボタンの大きさや選択色などを変更できます。また、選択できなくなった項目は:disabledと:has()を利用してカーソルと透明度を変更し、操作できない状態を見た目でも確認できるようにしています。

script.jsは指定時間後にラジオボタンを選択できなくする処理を行うファイルです。ページ表示から3000ミリ秒後にすべてのラジオボタンのdisabledをtrueへ変更し、状態表示を「3秒が経過したため選択できません。」へ切り替えます。

設置方法・使い方
sampleフォルダへindex.html、style.css、script.jsを配置し、3つのファイルを同じ階層へ保存します。そのあとsample/index.htmlをブラウザで開いてください。ページを開いてから3秒間はHTML・CSS・JavaScript・PHPの中から1つを選択できます。3秒が経過するとすべてのラジオボタンが無効になり、それ以降は選択を変更できなくなります。

カスタマイズできる内容
index.htmlではタイトル、説明文、ラジオボタンの選択肢、各選択肢のvalue、最初から選択しておく項目、時間経過前の状態表示を変更できます。選択肢の内容を用途に合わせて変更することで、回答や設定などから1つを選択する形式として利用できます。

style.cssでは全体の最大横幅、余白、背景色、枠線、角丸、タイトルや選択肢の文字サイズ、ラジオボタンのサイズと選択色を変更できます。無効状態ではopacity:.55;が設定されているため、この値を変更すると選択できなくなった項目の薄さを調整できます。

script.jsではsetTimeoutへ指定している3000を変更することで、ラジオボタンを選択できる時間を変更できます。また、時間経過後に表示される「3秒が経過したため選択できません。」の文章も変更できます。

数値調整
style.css
max-width:640px;
ラジオボタン全体の最大横幅です。値を大きくすると全体が横に広がり、小さくするとコンパクトになります。

margin:40px auto;
ラジオボタン全体の上下余白です。40pxを大きくすると上下の間隔が広がり、小さくすると狭くなります。

padding:32px;
全体の内側余白です。値を大きくすると内容と外枠の間隔が広がり、小さくすると狭くなります。

border-radius:18px;
全体の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

font-size:22px;
タイトルの文字サイズです。値を大きくするとタイトルが大きくなり、小さくすると小さくなります。

margin:0 0 24px;
説明文の下側余白です。24pxを大きくすると最初の選択肢との間隔が広がり、小さくすると狭くなります。

gap:12px;
ラジオボタンと選択肢の文字との間隔です。値を大きくすると間隔が広がり、小さくすると近くなります。

padding:14px 16px;
各選択項目の内側余白です。上下の14pxを大きくすると項目が高くなり、左右の16pxを大きくすると内容と枠線の間隔が広がります。

margin-bottom:14px;
各選択項目の下側余白です。値を大きくすると項目同士の間隔が広がり、小さくすると狭くなります。

border-radius:10px;
各選択項目の角丸です。値を大きくすると丸みが強くなり、0にすると四角になります。

width:20px;・height:20px;
ラジオボタンの大きさです。値を大きくするとラジオボタンが大きくなり、小さくすると小さくなります。

opacity:.55;
選択できなくなった項目の透明度です。値を小さくするとより薄く表示され、1に近づけると通常状態に近い濃さになります。

script.js
3000
ラジオボタンを選択できなくするまでの時間です。3000は3秒を表します。値を大きくすると選択できる時間が長くなり、小さくすると早く選択できなくなります。

レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssのwidth:100%とmax-width:640pxによって、画面幅に合わせてラジオボタン全体の横幅が調整されます。また、画面幅640px以下ではpadding:20px;へ変更して内側余白を小さくしているため、スマートフォン・タブレット・PCで利用できます。