JavaScriptで複数のチェックボックスのうち1つでも選択されていたらボタンを有効にする

この実装をしようと調べた時に生のJavaScriptの記事があまりなかったので、私のメモと勉強も兼ねて残しておきます。
JavaScript初心者でちゃんとした技術記事も初めてなので、変な表現をしているかもしれませんがご了承ください。

1. チェックボックスの作成

まずはHTMLでチェックボックスを作成します。

sample.html

<form>
    <label><input type="checkbox" name="sample" value="1">選択肢1</label><br>
    <label><input type="checkbox" name="sample" value="2">選択肢2</label><br>
    <label><input type="checkbox" name="sample" value="3">選択肢3</label><br>
    <input type="submit" id="button" value="送信" disabled>
</form>

submitのinputタグにdisabled属性を指定することで送信ボタンを無効（非活性）にしています。

<input type="submit" id="button" value="送信" disabled>

2. JavaScriptで関数を定義

sample.js

function change() {
	const submitBtn = document.getElementById('button');
	const checkboxes = document.querySelectorAll('input[name="sample"]:checked');
	if (checkboxes.length === 0) {
		submitBtn.disabled = true;
	} else {
		submitBtn.disabled = false;
	}
}

id属性から送信ボタンの要素を取得して変数に代入しています。

const submitBtn = document.getElementById('button');

HTMLでは選択したチェックボックスのinputタグにはchecked属性が追加されます。
これを利用してchecked属性が指定されている要素をname属性から取得して変数に代入しています。
name属性で取得した要素は複数ある可能性があるので（配列のような）NodeListとして返されます。

const checkboxes = document.querySelectorAll('input[name="sample"]:checked');

lengthプロパティを使用することでドキュメント内の要素数を取得することができます。
また、disabledプロパティではその要素の有効・無効を変更することができます。trueの時に無効、falseの時に有効となります。
これらを利用して、選択されたチェックボックスがなければ送信ボタンは無効、1つでも選択されていれば有効とするようにif文で処理を分けています。

if (checkboxes.length === 0) {
	submitBtn.disabled = true;
} else {
	submitBtn.disabled = false;
}

3. HTMLに関数を追加する

全てのチェックボックスのinputタグにonchange属性を追加し、属性値にはJavaScriptで定義した関数を指定します。
こうすることで、チェックボックスが選択されたときにイベントが発生するようになります。

<label><input type="checkbox" name="sample" value="1" onchange="change()">選択肢1</label>

4. 完成形

sample.html

<form>
    <label><input type="checkbox" name="sample" value="1" onchange="change()">選択肢1</label><br>
    <label><input type="checkbox" name="sample" value="2" onchange="change()">選択肢2</label><br>
    <label><input type="checkbox" name="sample" value="3" onchange="change()">選択肢3</label><br>
    <input type="submit" id="button" value="送信" disabled>
</form>

sample.js

function change() {
	const submitBtn = document.getElementById('button');
	const checkboxes = document.querySelectorAll('input[name="sample"]:checked');
	if (checkboxes.length === 0) {
		submitBtn.disabled = true;
	} else {
		submitBtn.disabled = false;
	}
}

これで完成です。
どれか1つでもチェックボックスが選択されていれば送信ボタンが有効となり、選択されていない場合は無効となります。

See the Pen Untitled (@katao_eng) on CodePen.

5. 最後に（ただの感想）

自力でJavaScriptを書いたのが初めてだったのでこの程度でも苦戦しました。
アウトプットをすると整理できていいですし、勉強にもなりましたが人に伝えられるように書くのは難しいです。
クオリティとスキルを上げていきたいので、気になるところはアドバイスいただけると嬉しいです。

【追記】
コメントでいただいたアドバイスを参考に改良版の記事を作成しました。
[改良版]JavaScriptで複数のチェックボックスのうち1つでも選択されていたらボタンを有効にする