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

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

# 1. チェックボックスの作成
まずはHTMLでチェックボックスを作成します。
```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`属性を指定することで送信ボタンを無効（非活性）にしています。
```html
<input type="submit" id="button" value="送信" disabled>
```

<img src="https://i.gyazo.com/6fa543a2d48265427bd644d7b6ec1e38.png" width=40%>

# 2. JavaScriptで関数を定義
```js: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属性から送信ボタンの要素を取得して変数に代入しています。

```js
const submitBtn = document.getElementById('button');
```
HTMLでは選択したチェックボックスのinputタグには`checked`属性が追加されます。
これを利用して`checked`属性が指定されている要素をname属性から取得して変数に代入しています。
name属性で取得した要素は複数ある可能性があるので（配列のような）NodeListとして返されます。
```js
const checkboxes = document.querySelectorAll('input[name="sample"]:checked');
```
`length`プロパティを使用することでドキュメント内の要素数を取得することができます。
また、`disabled`プロパティではその要素の有効・無効を変更することができます。`true`の時に無効、`false`の時に有効となります。
これらを利用して、選択されたチェックボックスがなければ送信ボタンは無効、1つでも選択されていれば有効とするようにif文で処理を分けています。
```js
if (checkboxes.length === 0) {
	submitBtn.disabled = true;
} else {
	submitBtn.disabled = false;
}
```

# 3. HTMLに関数を追加する
全てのチェックボックスのinputタグに`onchange`属性を追加し、属性値にはJavaScriptで定義した関数を指定します。
こうすることで、チェックボックスが選択されたときにイベントが発生するようになります。
```js
<label><input type="checkbox" name="sample" value="1" onchange="change()">選択肢1</label>
```

# 4. 完成形
```html: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>
```


```js: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つでもチェックボックスが選択されていれば送信ボタンが有効となり、選択されていない場合は無効となります。
<p class="codepen" data-height="300" data-default-tab="html,result" data-slug-hash="poaBLoB" data-user="katao_eng" style="height: 300px; box-sizing: border-box; display: flex; align-items: center; justify-content: center; border: 2px solid; margin: 1em 0; padding: 1em;">
  <span>See the Pen <a href="https://codepen.io/katao_eng/pen/poaBLoB">
  Untitled</a> (<a href="https://codepen.io/katao_eng">@katao_eng</a>)
  on <a href="https://codepen.io">CodePen</a>.</span>
</p>
<script async src="https://cpwebassets.codepen.io/assets/embed/ei.js"></script>

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

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