【JavaScript】☑checkboxのオン・オフと連動した、送信ボタンの文字色変更

Question

前提・実現したいこと

□利用規約に同意する
にチェックを入れると「送信ボタン」が押せるフォームを作っています。

「送信ボタン」の文字色について、
□利用規約に同意する
が未チェックの時は白に、チェック済の時は黒にしたいです。
そこでif文で条件分岐させてcheckboxの文字色を変更しようとしたのですが、反映されませんでした。

HTML(該当部分)とJavascript(全文)のコードは以下の通りです。

原因や解決方法がわかる方、アドバイスをお願いします！

該当のソースコード

<!--「利用規約に同意する」チェックボックス -->
<input type="checkbox" name="agreement" value="1" class="checkbtn">
利用規約に同意します

<!--送信ボタン -->
<p class="buttons"><input type="submit" name="submit_btn" class="submit" value="送信"></p>

該当のソースコード

/*
「利用規約に同意する」をチェックした時に送信ボタンが押せるようになる。
ページのロード後、フォームの送信ボタンを有効にし、
「利用規約に同意する」チェックボックスにクリックイベントを設定する。
*/

window.onload = mailformcheck;

function mailformcheck() {
    //送信ボタンを取得
    var submitList = document.getElementsByName('submit_btn'); 
    var submit = submitList[0]; 

    //送信ボタンを無効にする
    submit.disabled = ture;

    //「同意します」チェックボックスを取得
    var checkboxlist = document.getElementsByName('agreement');
    var checkbox = checkboxlist[0];

    //クリック時のイベントを設定
    checkbox.onclick = toggleCheckbox;
}

//チェックボックスのクリックイベントを定義
function toggleCheckbox() {
    //送信ボタンを取得する
    var submitList = document.getElementsByName('submit_btn');
    var submit = submitList[0];

    //チェックボックスがチェックされているか
    var checked = this.checked;

    
    if (checked === true) {
        submit.disabled = false;
        document.getElementsByName('submit_btn').style.color="black";
    } else {
        submit.disabled = true;
        document.getElementsByName('submit_btn').style.color="white";
    }
}

Comments

[m.ts10806]

＞$('p').css('color'. 'white');
に変えても

上記だけ急にjQueryの記法が導入されてますが、jQueryを使われているなら記法は統一された方が良いかと思います。
アドバイスとしてはどちらで欲しいのでしょうか。

[退会済みユーザー]

JavaScriptで頂きたいです。

とりあえず動けばいいや！と思ってjQueryの記法も調べて混ぜてしまったのですが、
良くないことだったのですね…。失礼しました。

ご指摘の通り、わかりにくくなりそうなので
＞$('p').css('color'. 'white');
の部分は削除しておこうと思います。

[m.ts10806]

統一した方がメンテナンスしやすいですからね。
（ただjQuery読み込ませてるなら使った方が・・・もったいないかなというのはある）

[退会済みユーザー]

なるほど。作って終わりではないですもんね！

jQueryの方が短く書けるとは思うのですが、
今の理解度で全部jQueryに書き直すと自分が混乱しそうなので・・・。

JavaScript本を参考にして作っていることもあり、
まずJavaScriptのままで理解・実装したい！と思った次第でございます。

Answer 1

反映されませんでした。

原因と思われるもの。

 document.getElementsByName('submit_btn').style.color="black";
//getElementsByNameはElementListなので既にご自身でほかでやってるようにdocument.getElementsByName('submit_btn')[0]ってする必要があると思います。

ただ、コードがかなり冗長に思いました。
cssでstyle先に準備しておけばコード自体は簡潔に書けそうです。

最初から考えた方が早そうな気がしたので、ざっくり作り直してみました。
一応、シンプルには書いたつもりです。

ラベルの色だけ変えてもボタンは押せるので、属性の付け替えで対応します。

<!--「利用規約に同意する」チェックボックス -->
<label for="agreement">
	<input type="checkbox" name="agreement" id="agreement" value="1" class="checkbtn">
	利用規約に同意します
</label>

<!--送信ボタン -->
<p class="buttons"><input type="submit" name="submit_btn" class="submit" id="submit" value="送信" disabled></p>

	#submit{
		color:#000;
	}
	#submit:disabled{
		color:#fff;
	}

window.addEventListener('DOMContentLoaded', () => {
  document.querySelector('#agreement').addEventListener('click', evt => {
	let submit_button = document.querySelector('#submit');
	submit_button.disabled = true;
	if (evt.currentTarget.checked) {
		submit_button.disabled = false;
	}
  });
});

Comments

[m.ts10806]

あ間違えた。ボタンの文字の色か。

[退会済みユーザー]

解決しただけでなく、コード量が半分以下に短くなって感動しました。
関数を使いこなせばここまで簡潔に書けるのですね。

素早く、しかも分かりやすく解答して下さってありがとうございます！

[m.ts10806]

セレクタとか属性をどこまで把握しているか、そこをどう発想広げるかだと思います
もちろん書ける範囲で書くのは分かりやすくていいのですけど、
使う言語の役割分担を考えるところからやってみると、簡潔なコードで求める結果が得られるように作れると思います。