「同意する」をチェックしないと押せないボタンを作りたい
山崎講師disabled属性をJavaScriptで操作することでチェックしないと押せないボタンを作ることができます。
<!DOCTYPE html>
<html>
<head>
<title>consent.html</title>
<meta charset="UTF-8">
</head>
<body>
<div class="container">
<form action="https://saycon.co.jp/">
<p><input type="checkbox" id="with-consent" name="with-consent">
<label for="with-consent">同意する</label>
</p>
<button type="submit" disabled id="submit">送信</button>
</form>
</div>
<script>
// "#with-consent"というIDを持つ要素をドキュメントから取得し、consentという定数に保存します
const consent = document.querySelector("#with-consent");
// "#submit"というIDを持つ要素をドキュメントから取得し、buttonという定数に保存します
const button = document.querySelector("#submit");
// consent要素の状態が変化したときに実行されるイベントリスナーを追加します
consent.addEventListener('change', () => {
// consent要素がチェックされているかどうかを確認します
if (consent.checked === true) {
// チェックが入っていれば、submitボタンを有効化します
button.disabled = false;
} else {
// チェックが入っていなければ、submitボタンを無効化します
button.disabled = true;
}
});
</script>
</body>
</html>