※当サイトにはプロモーションが含まれています。
クライアント 「同意する」にチェックを入れるとボタンが押せるようになる仕組みを作ってくれ！
にゃテック おけまるだにゃ。
お問い合わせフォームなどで、「個人情報保護方針に同意する」のチェックボックスに、チェックを入れるとボタンが有効になるといった仕組みが必要になることがあります。
例えば、下記のような仕組みになります。
今回、CSSとJavaScriptを使用して作成したので、備忘録として残しておきます。
チェックボックスにチェックを入れるとボタンが有効にする仕組み
チェックボックスにチェックを入れるとボタンが有効になる仕組みについてです。
HTML
<form>
<label>
<input type="checkbox" class="nya-check-checkbox" id="checkbox">
個人情報保護方針に同意する
</label>
<button type="submit" class="nya-check-button" id="submitButton" disabled>送信</button>
</form>ボタンは初期状態だと、disabledに設定されており、クリックできないようになっています。
CSS
/* ボタンの基本スタイル */
.nya-check-button {
padding: 10px 20px;
background-color: #ccc; /* 初期状態の背景色 */
border: none;
border-radius: 5px;
color: #fff;
cursor: not-allowed;
transition: background-color 0.3s, cursor 0.3s;
}
/* ボタンが有効になったときのスタイル */
.nya-check-button:enabled {
background-color: #007BFF; /* 有効時の背景色 */
cursor: pointer;
}
ボタンの状態に応じて、:enabledセレクターを使い、背景色とカーソルのスタイルを変更しています。
JavaScript
// チェックボックスとボタンの要素を取得
const checkbox = document.getElementById('checkbox');
const button = document.getElementById('submitButton');
// チェックボックスの状態を監視
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
button.disabled = false; // ボタンを有効化
} else {
button.disabled = true; // ボタンを無効化
}
});
チェックボックスのchangeイベントを監視して、チェック状態に応じてボタンのdisabled属性を切り替えます。
- チェックされている場合：button.disabled = false
- チェックが外れている場合：button.disabled = true
すると、チェックを付けたり外したりすることで、ボタンが有効・無効になる仕組みを作成する事ができます。
最後に、HTMLとCSS、JavaScriptをまとめたコードを記載しておきます。
このコードをコピペすることで、動作確認が容易にできると思います。
よかったらご活用ください。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>チェックボックスとボタン</title>
<style>
/* ボタンの基本スタイル */
.nya-check-button {
padding: 10px 20px;
background-color: #ccc; /* 初期状態の背景色 */
border: none;
border-radius: 5px;
color: #fff;
cursor: not-allowed;
transition: background-color 0.3s, cursor 0.3s;
}
/* ボタンが有効になったときのスタイル */
.nya-check-button:enabled {
background-color: #007BFF; /* 有効時の背景色 */
cursor: pointer;
}
</style>
</head>
<body>
<form>
<label>
<input type="checkbox" class="nya-check-checkbox" id="checkbox">
同意します
</label>
<button type="submit" class="nya-check-button" id="submitButton" disabled>送信</button>
</form>
<script>
// チェックボックスとボタンの要素を取得
const checkbox = document.getElementById('checkbox');
const button = document.getElementById('submitButton');
// チェックボックスの状態を監視
checkbox.addEventListener('change', () => {
if (checkbox.checked) {
button.disabled = false; // ボタンを有効化
} else {
button.disabled = true; // ボタンを無効化
}
});
</script>
</body>
</html>
