選択できないラジオボタンを作る方法
選択できないラジオボタンを作る方法を紹介します。ラジオボタンへdisabled属性を設定すると、その項目はクリックしても選択できなくなります。利用できないプランや在庫切れの商品、条件を満たしていない選択肢などを表示したい場合によく利用される機能です。
このサンプルではHTMLとCSSだけを使用し、JavaScriptを使わずに選択できないラジオボタンを実装しています。利用できる項目と利用できない項目を見た目で区別できるようにしているため、ユーザーにも分かりやすいフォームを簡単に作成できます。特別なライブラリは不要で、そのまま導入できる構成です。
配送方法や支払い方法、会員限定オプション、アンケートなど、条件によって選択できる項目を制限したい場面へ応用できます。項目名や無効化する選択肢、配色なども自由に変更できるため、さまざまなWebフォームへ利用しやすいサンプルです。
カスタマイズについて 項目名や無効化するラジオボタン、配色は用途に合わせて自由に変更できます。
デモ
コードをコピーして使おう！
<!DOCTYPE html>
<html lang="ja">
<head>
<!-- 文字コードをUTF-8へ設定 -->
<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="disabled-radio-button_wrap">
<!-- ラジオボタンエリアのタイトル -->
<div class="disabled-radio-button_title">
配送方法を選択
</div>
<!-- ラジオボタンの状態を説明する文章 -->
<p class="disabled-radio-button_text">
一部の項目は選択できない状態になっています。
</p>
<!-- ラジオボタン一覧 -->
<div class="disabled-radio-button_list">
<!-- 通常配送の選択項目 -->
<label class="disabled-radio-button_label">
<!-- 通常配送を初期選択するラジオボタン -->
<input
class="disabled-radio-button_input"
type="radio"
name="delivery"
value="normal"
checked>
<!-- 通常配送の項目名 -->
<span class="disabled-radio-button_name">
通常配送
</span>
</label>
<!-- お急ぎ便の選択項目 -->
<label class="disabled-radio-button_label">
<!-- お急ぎ便を選択するラジオボタン -->
<input
class="disabled-radio-button_input"
type="radio"
name="delivery"
value="express">
<!-- お急ぎ便の項目名 -->
<span class="disabled-radio-button_name">
お急ぎ便
</span>
</label>
<!-- 日時指定便の選択項目 -->
<label class="disabled-radio-button_label">
<!-- disabled属性で日時指定便を選択できない状態にする -->
<input
class="disabled-radio-button_input"
type="radio"
name="delivery"
value="date"
disabled>
<!-- 日時指定便の項目名 -->
<span class="disabled-radio-button_name">
日時指定便（受付停止中）
</span>
</label>
<!-- 店舗受け取りの選択項目 -->
<label class="disabled-radio-button_label">
<!-- disabled属性で店舗受け取りを選択できない状態にする -->
<input
class="disabled-radio-button_input"
type="radio"
name="delivery"
value="store"
disabled>
<!-- 店舗受け取りの項目名 -->
<span class="disabled-radio-button_name">
店舗受け取り（準備中）
</span>
</label>
</div>
<!-- 選択できない項目について案内する補足文 -->
<p class="disabled-radio-button_note">
disabled属性が付いた項目はクリックしても選択できません。利用できる項目のみ選択できます。
</p>
</div>
</body>
</html>
サンプル一式を取得する場合 HTML・CSSなどすべてのファイルが必要な場合は、「サンプル一式をダウンロード」をクリックしてください。
ファイル構成と設置方法
このサンプルはHTMLとCSSの2ファイルで構成されています。HTMLファイルでラジオボタンの選択肢を配置し、CSSファイルで選択できない項目の見た目を設定しています。disabled属性を利用して一部のラジオボタンを選択できない状態にし、背景色や文字色も変更することで利用できない項目であることを分かりやすく表示できます。
sample/
├── index.html
└── style.css
各ファイルの役割
index.html
ラジオボタン本体や選択肢を配置します。項目名の変更や選択肢の追加・削除、disabled属性を付ける項目の変更、初期選択する項目を変更できます。
style.css
ラジオボタン全体のレイアウト、背景色、枠線、文字サイズ、無効状態の背景色や文字色、レスポンシブ対応など見た目を設定します。
設置方法・使い方
sampleフォルダ内の index.html をブラウザで開くと利用できます。disabled属性が設定されたラジオボタンはクリックしても選択できず、利用できる項目のみ選択できます。
カスタマイズできる内容
index.htmlではラジオボタンの項目名や選択肢の数、初期選択する項目、disabled属性を設定する項目を変更できます。style.cssでは背景色、枠線、文字色、角丸、余白、文字サイズ、カード幅、無効状態の配色などを自由に変更できます。
数値調整
max-width:760px;
760pxは全体の最大横幅です。値を大きくすると表示エリアが広くなります。
padding:36px;
36pxは全体の内側余白です。値を大きくすると余白が広くなります。
gap:16px;
16pxはラジオボタン同士の間隔です。値を変更すると項目同士の余白が変わります。
min-height:62px;
62pxは各ラジオボタン項目の高さです。値を大きくするとクリック・タップしやすい高さになります。
border-radius:18px;
18pxは全体カードの角丸です。値を大きくすると丸みが強くなります。
border-radius:14px;
14pxは各ラジオボタン項目の角丸です。値を変更すると項目の丸みが変わります。
width:22px;
height:22px;
22pxはラジオボタン本体のサイズです。値を変更するとラジオボタンの大きさが変わります。
レスポンシブ対応
このサンプルはレスポンシブ対応です。style.cssでwidth:100%、max-width、およびmedia queryを使用しているため、スマートフォン・タブレット・PCでもレイアウトが崩れにくく、画面幅に応じて余白や文字サイズを自動調整します。
コメント