チェックを入れないと「送信」が押せないボタン

またも２日かかって完成。
ポートフォリオの完成が果てしなく遠い。
今回はチェックを入れないと「送信」が押せないボタンをつくった。
エラー表示部分も作り直した。

バリデーションチェック

参考サイト

HTMLフォームにjQuery Validation Engineでバリデーションを走らせたり連打対策してみる - Qiita

こちらを参考に「送信」ボタンを押下した時にエラー表示が出てくる動きをつけた。
こちらのサイトの情報で、チェックを入れないと「送信」が押せないボタンも作れるかな、と思ったけれど実現ならず。

完成部分↓

プラグインの入手先

https://jqueryvalidation.org/

チェックを入れないと送信が押せないボタン

参考サイト

【jQuery】disabled属性を使いチェックしたらボタンを有効化・無効化させる方法

いくつかのサイトを渡り歩いたが理解が遠かった。
初心に返って最初に訪れたサイトに帰り、もういちどやり直した。
うまくいった！
htmlの書き方を昨日と少し変えたのが功を奏したのかもしれない。

完成部分↓

チェックが入っていない状態

チェックが入った状態

🔰「:checked」？🔰
調べると出てくる分からないこと。

【jQuery入門】checkboxのchecked設定や取得まとめ！ | 侍エンジニアブログ

後日修正部分メモ

他のページのボタンに影響があったため修正。

修正前

    <script>
        $(function () {
            $("#agree").change(function () {
                // チェックが入っていたら有効化
                if ($(this).is(":checked")) {
                    // ボタンを有効化
                    $("#button").prop("disabled", false);
                    // 有効化したらボタンの色を変える
                    $("#button").css({
                        backgroundColor: "#326C73",
                        border: "1px solid #D99962"
                    });
                } else {
                    // ボタンを無効化
                    $("#button").prop("disabled", true);
                    // 無効化したらボタンの色を戻す
                    $("#button").css({
                        backgroundColor: "#c1c1c1",
                        border: "none"
                    });
                }
            });
        });
    </script>

修正後

    <script>
        $(function () {
            $("#agree").change(function () {
                // チェックが入っていたら有効化
                if ($(this).is(":checked")) {
                    // ボタンを有効化
                    $("#button").prop("disabled", false);
                } else {
                    // ボタンを無効化
                    $("#button").prop("disabled", true);
                }
            });
        });
    </script>

cssにdisabled時の指定をするだけで良かった。

.btn {
    display: block;
    box-sizing: border-box;
    margin: 2em 0 4em 0;
    width: 14em;
    height: 2.5em;
    border: 1px solid #D99962;
    border-radius: 1.25em;
    background: #326C73;
    color: #fff;
    text-align: center;
}

.btn:hover {
    background: #fff;
    color: #326C73;
}

.btn:disabled {
    background: #c1c1c1;
    border: none;
}
  
.btn:disabled:hover {
    color: #fff;
}