(Sample)

    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>
    Webアプリケーション制作のための小ネタ集　目次に戻る

    「同意する」をチェックしないと押せないボタンを作りたい　最後までお読みいただきありがとうございます。

    研修のカリキュラムを見てみる