HTMLのチェックボックスを非活性にする方法とは？JavaScriptを使った切り替え方も解説

HTMLのチェックボックスを非活性にする方法を探していませんか？

HTMLのチェックボックスを非活性にできれば、お問い合わせフォームなどで複雑な処理ができるようになりますよね。

今回は、チェックボックスを非活性にする方法を身に着けたい方のために、

以上の項目に沿って、解説していきますね。

この記事を読めば、チェックボックスの非活性に関することが分かるようになりますよ。

ぜひ最後まで読んでくださいね！

チェックボックスとは？

チェックボックスとは、Webページ上に表示できる選択肢の項目のことです。

チェック欄をクリックすることで、チェックを付けたり外したりすることができます。

HTMLのinput要素に、「type=”checkbox”」を指定することで、チェックボックスを設置することができます。

<input type="checkbox" name="box_name" value="1">

「type=”checkbox”」のときに、指定する主な属性は、以下の4つです。

name属性は、input要素の名前で、処理するプログラムに送信するときに必要となります。チェックボックスの時には、必須の属性です。

value属性は、プログラムに送信する値を指定します。チェックボックスが選択されているときに、この値が送信されます。

こちらも、チェックボックスの時には、必須の属性になります。

checked属性を指定することで、あらかじめチェックされた状態で表示することができます。

disabled属性を指定すると、チェックボックスが操作できないようになります。

今回の記事では、こちらの属性を中心に説明していきます。

HTMLのみでチェックボックスを非活性にする方法

先ほどの、チェックボックスの説明の中で、disabled属性を指定すると、チェックボックスが操作できなくなると書きましたね。

<input type="checkbox" name="name" value="1" disabled>

上記のように記述すると、チェックボックスを非活性にすることができます。

チェックボックスをチェックしたままの状態で、非活性にすることも可能です。

<input type="checkbox" name="name" value="1" disabled checked>

ただし、フォームを送信するときに、disabledが指定されたinput要素の値は送信されません。

<input type="checkbox" name="sample" value="1" disabled checked>
<input type="hidden" name="sample" value="1">

上記のように、name属性とvalue属性が同じinput要素を「type=”hidden”」で作成すると、チェックボックスを非活性にしたまま、値が送信されるようになります。

活性・非活性を切り替えるには？

HTMLでの指定では、静的な非活性のチェックボックスしか作れないため、あまり使用するケースがないかもしれません。

よく見かけるものが、特定の項目にチェックすると、他の項目や送信ボタンが非活性から活性に切り替わる、というものですね。

JavaScriptを使うと、活性・非活性の切り替えを実装できます。

<input type="checkbox" id="checkBox" name="checkBox" value="1" onchange="change()"><label for="checkBox">「個人情報の取り扱いについて」に同意する</label>
<button type="submit" value="送信" class="form_btn" id="submit" disabled>送信</button>

JavaScriptのコードは以下になります。

function change() {
    var element;
    if(document.getElementById("checkBox").checked) {
        // チェックが入っていたら、送信ボタンのdisabledを外す
        element = document.getElementById("submit");
        element.disabled = false;
    }else {
        // チェックが外れていたら、送信ボタンにdisabledを付ける
        element = document.getElementById("submit");
        element.disabled = true;
    } 
}

「onchange=”change()”」をinput要素に指定することで、チェックボックスのチェックが切り替わるごとに、関数change()が処理されます。

document.getElementById(ID)は、指定したIDのドキュメント要素を取得します。

上記では、「submit」がIDのドキュメント要素を取得し、「element.disabled」で「disabled」の追加/削除を実行しています。

まとめ：活性・非活性の切り替えを行うには、プログラムの知識が必要

今回は、HTMLのチェックボックスを非活性にする方法について解説してきました。

HTMLのみでも一部再現できますが、ユーザーのアクションに対して、活性・非活性の切り替えをさせたい場合には、JavaScriptの知識が必要になります。

さらに、jQueryというJavaScriptライブラリを使用すると、複雑な処理を簡易な記述で行えるようになります。

Webサイトを作る上で、後々必要となる知識なので、余裕がある方は勉強してみてくださいね。

今回の記事が、少しでも参考になれば幸いです。

---

プログラミングやパソコンを使って働きたい！

そのように考え、成長しているIT業界への転職を考えている方も増えてきました。

『IT業界に興味はあるけど、よくわからない…』
『パソコンとかそもそも苦手なのに私なんかにできるのかな』
『エンジニアって聞くけど難しそう』

反対にこのような声も聞く事があります。

そう考えている方は、一度ぜひ転職に成功したエンジニアの方のインタビューをご覧ください！