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

公開日: 2021.09.15
更新日: 2024.01.06
HTMLのチェックボックスを非活性にする方法とは?JavaScriptを使った切り替え方も解説

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

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

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

  • チェックボックスの非活性とは?
  • 活性・非活性を切り替える方法について

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

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

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

チェックボックスとは?

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

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

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

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

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

  • name属性
  • value属性
  • checked属性
  • disabled属性

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

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

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

\プログラミングを学んで/
人生を変えた3名

インタビュー記事一覧 >

\プログラミングスクールを比較/

DMM WEBCAMP

COACHTECH

RUNTEQ

DMM WEBCAMP COACHTECH RUNTEQ
目指せる姿 WEBエンジニアへの転職
フリーランスエンジニア WEBエンジニアへの転職
分割払い
補助金 ×
転職保証 × ×
受講期間 12週間〜 3ヶ月〜 5ヶ月〜
特徴 【IT業界の転職を一番に考えたい方向け】
大手DMMが運営のプログラミングスクール
転職成功率98.8%
豊富なキャンペーンや補助金制度あり
【フリーランスを目指したい方向け】
フリーランスのエンジニアを最短で目指す
エンジニアと共に実際の案件開発を担当
【とことん勉強してから転職したい方向け】
1,000時間(約9カ月)のカリキュラムでしっかり勉強
企業の求める即戦力のWEBエンジニアを目指す
料金 329,350円〜
※給付金適用後
42万9,000円~ 55万円

公式HP

公式HP

公式HP

関連記事

資料請求

  • 短期集中で最速エンジニア転職を実現-転職成功者インタビュー一覧

    DMM WEBCAMPでは転職成功率98%を実現しています。本資料では、元警察官や元ラーメン屋など様々なバックグラウンドを持つ卒業生の声をお届けします。

    資料をダウンロードする
  • IT技術がもたらす3つの変化と身につけるべきスキル

    IT技術の発展により、今後10~20年程度で47%の仕事がなくなると言われています。どのような変化が訪れ、私達はどのようなスキルを身につけるべきかを解説します。

    資料をダウンロードする
  • 未経験がフリーランスエンジニアになる方法-年収アップで自由な働き方を手に入れる

    働き方改革やリモートワークの影響でフリーランスという働き方の人気は高まりつつあります。フリーランスエンジニアとして活躍するために必要な情報をお届けします。

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5