TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのcheckboxをdisabledにする方法を現役エンジニアが解説【初心者向け】
オーダーメイドコース
icon
icon
HTML

HTMLのcheckboxをdisabledにする方法を現役エンジニアが解説【初心者向け】

初心者向けにHTMLのcheckboxをdisabledにする方法について解説しています。checkboxはサイト上にチェックボックスを設置するときに使用します。チェックボックスをdisabledにする(操作不可能にする)場面の例と書き方を覚えましょう。

テックアカデミーマガジンは受講者数No.1のプログラミングスクール「テックアカデミー」が運営。初心者向けにプロが解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。 ※ アンケートモニター提供元：GMOリサーチ株式会社　調査期間：2021年8月12日～8月16日　 調査対象：2020年8月以降にプログラミングスクールを受講した18～80歳の男女1,000名　 調査手法：インターネット調査

HTMLのcheckboxをdisabledにする方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。

そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。

 

なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。

 

田島悠介

今回は、HTMLに関する内容だね！

大石ゆかり

どういう内容でしょうか？

田島悠介

checkboxをdisabledにする方法について詳しく説明していくね！

大石ゆかり

お願いします！

目次

 

checkboxとは

checkboxとは、HTMLのinput要素で指定することができるtype属性の一つです。

<input type="checkbox" name="title" value="1" />

上の形でHTMLに追加することで、サイト内にチェックボックスを設置することができます。

 

[PR] Webデザインで副業する方法とは

checkboxをdisabledにする方法

複数のチェックボックスが設置されており、それらをユーザーにチェックしてもらう中でユーザーがチェックした項目によっては、そのあとのチェック項目を操作できないようにしたいといったシーンが出てくる場合があります。その時は該当するinput要素に、ある指定をすることで選択するように設定することができます。

その方法はinput要素に

disabled="disabled"

を指定することで設定ができます。

 

実際に書いてみよう

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

 

まとめ

input要素に

disabled="disabled"

を指定することでチェックボックスを操作できないように設定ができます。

 

監修してくれたメンター

土田隼平（つちだしゅんぺい)

フリーのWebエンジニアです。
最近までは求人サービスや画像共有システム、ECサービスの開発・運用をやってました。

趣味はラジオ（特にオールナイトニッポンとJUNK）を聞くことや近所の散歩です。
今の最重要ミッションは「運動不足解消」です。

 

大石ゆかり

内容分かりやすくて良かったです！

田島悠介

ゆかりちゃんも分からないことがあったら質問してね！

大石ゆかり

分かりました。ありがとうございます！

 

TechAcademyでは、初心者でもオリジナルWebサイトを公開できるオンラインブートキャンプWebデザイン講座を開催しています。

挫折しない学習方法を知れる説明動画や、現役エンジニアとのビデオ通話とチャットサポート、学習用カリキュラムを体験できる無料体験も実施しているので、ぜひ参加してみてください。

記事を検索

関連するキーワード

関連する記事

bタグとstrongタグの書き方！HTMLで文字を太字にする方法【初心者向け】現役Webデザイナーが解説

HTMLで強調したい部分に使われるタグとして太字やイタリックなど様々あります。 その中でも今回は太字について紹介します。 bタグとstrongタグを...
HTML

HTMLでtableタグを使わないで段組レイアウトする方法を現役エンジニアが解説【初心者向け】

HTMLでtableタグを使わないで段組みレイアウトする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します...
HTML

サイトの印象を変えたい！HTMLで動画を埋め込みする方法【初心者向け】

今回は、HTMLで動画を埋め込みする方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 サイトのト...
HTML

HTMLをブラウザで表示するXAMPPの使い方を現役エンジニアが解説【初心者向け】

HTMLをブラウザで表示するXAMPPの使い方について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 ...
HTML

Atomの予測補完機能を使ったHTMLのコーディング環境を現役エンジニアが解説【初心者向け】

Atomの予測補完機能を使ったHTMLのコーディング環境について、TechAcademyのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説しま...
HTML

HTMLのinput要素でパスワードの入力欄を作成する方法を現役エンジニアが解説【初心者向け】

HTMLのinput要素でパスワードの入力欄を作成する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。...
HTML

あわせてよく読まれている記事

JavaScriptでcheckboxを使う方法を現役エンジニアが解説【初心者向け】

JavaScriptでcheckboxを使う方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。   JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでcheckboxを使う方法について詳しく説明していくね！ 大石ゆかり お願いします！   checkboxとは HTMLで複数の選択をさせる場合に使用する部品です。 下記のcheckboxの例では、0個-3個を選択できます。   基本的なcheckboxの作り方 inputタグのtypeをcheckboxにして、表示する文字を記述することでチェックボックスを作れます。 <input type="checkbox">チェック1 この作り方の場合は、チェックを入れるためには四角の中をクリックしないとチェックできません。 表示した文字もクリックしてもチェックが入るようにするとユーザーに親切です。その場合は、下記のようにlabelタグで囲うことで四角の中と文字全体のどこをクリックしてもチェックできるようになります。 <label> <input type="checkbox">チェック1 </label> また、下記のようなCSSをつけることでマウスカーソルの形でクリックできる場所（チェックできる場所）をユーザーに伝えることができます。 label, input[type='checkbox'] { cursor: pointer; }   [PR] Webデザインで副業する方法とはcheckboxに付け加えたい機能 下記の3つのチェックボックスを表示するHTMLを用意して、JavaScriptでよくある処理を記述していきます。   HTMLソース <!DOCTYPE html> <html lang="ja"> <head> <meta charset="UTF-8"> </head> <body> <label> <input type="checkbox" value="チェック1">チェック1 </label> <label> <input type="checkbox" value="チェック2">チェック2
JavaScript

JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォーム要素にdisabledを設定・解除する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。 目次checkboxとはcheckboxをdisabledにする方法実際に書いてみようまとめ監修してくれたメンター そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでフォーム要素にdisabledを設定・解除する方法について詳しく説明していくね！ 大石ゆかり お願いします！   disabledとは disabledは「無効」を示すHTMLの属性です。 disabled属性は、「フォーム要素」と呼ばれるHTML要素に対して指定できます。   フォーム要素の代表的な例は、以下の通りです。 input / select / textarea / button どの要素に対しても、disabled属性をあてると「無効」になるような挙動をします。   例えば、以下のように、何かの操作ができる要素に対し、操作をできなくするために使います。 input要素にdisabled属性を指定すると、そのinput要素に入力ができなくなる button要素にdisabled属性を指定すると、そのbutton要素を押せなくなる これは、ある条件を満たさないと入力できない・ボタンを押せない、といった仕様を実現するために便利な機能です。 また、disabledを指定したフォーム要素の値は、フォーム送信時に送信されない特徴もあります。   disabled指定をした要素の見た目 CSSでスタイルを変えていない状態では、無効になった要素はグレーがかった色になり、入力できないことを伝えます。   HTMLでdisabled属性を指定する disabled属性は、フォーム要素に以下の記述を加えることで指定できます。 //input要素の入力を不可にする <input type="text" name="name" placeholder="入力できません" disabled> //ボタンを押せなくする <button type="button" disabled>押せないボタン</button>   JavaScriptでdisabled属性を指定 / 解除する JavaScriptでもdisabled属性を指定できます。 これは、ユーザーの操作に応じて入力可能、不可能を切り替える際などに有用です。   コードは以下のような流れになります。 //HTML <input type="text" id="input-message"> //Javascript const input = document.getElementById('input-message'); input.disabled = true; ここではまずinput要素のidを用いて要素を取得し、inputという変数に代入しています。 あとはinputのdisabledプロパティをtrueに設定するだけで、HTML側で要素がdisabledになります。   逆に解除したい（有効な状態にしたい）場合は、このdisabledプロパティをfalseに設定します。 input.disabled = false;   disabledの基本に関する説明は以上です。 次は実践的なコードを書いてみましょう！   実際に書いてみよう 今回は「ユーザーが5文字以上入力したらボタンを押せるようにする」という機能を実装してみましょう。 これはWeb用語では「バリデーション」と呼ばれ、ユーザーが入力した値に応じて送信を可能にしたり、不可能にする機能です。 身近なところでは、会員登録時に「パスワードが短すぎます」とメッセージを出されるのが一例です。   完成形のコードは以下の通りです。 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>disabled sample</title> </head> <body> <form id="form" action="#"> <input type="text" id="input-text" placeholder="5文字以上入力してください"> <button type="submit" id="button" disabled>送信</button> </form> <script>
JavaScript

HTMLでラジオボタンとチェックボックスを表示する方法【初心者向け】

HTMLについて今さら聞けない！という初心者のために、HTMLの基礎を紹介する記事です。 今回は、ラジオボタンとチェックボックスを表示する方法について、初心者の方にも分かりやすく2人のキャラクターを用いて解説しています。 そもそもHTMLの記述方法がわからない場合は、HTMLの書き方について解説した記事を読むとさらに理解が深まります。   なお本記事は、TechAcademyのオンラインブートキャンプWebデザイン講座のHTMLカリキュラムをもとに執筆しています。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 ラジオボタンとチェックボックスを表示する方法について詳しく説明していくね！ 大石ゆかり お願いします！   入力フォームの選択ボタン 入力フォームでよく見かける選択ボタンに、ラジオボタンとチェックボックスがあります。どちらも<input>タグにtype属性を指定することで簡単につくることができます。 <input>タグについては HTMLのinputタグとtextareaタグを使ってテキスト入力欄を表示する方法 をご覧ください。 ラジオボタン、チェックボックスは以下のタグで表示することが可能です。 ・ラジオボタン  <input type=”radio”> 選択肢のなかから、ひとつだけを選択するボタン （※同一name属性内で、一項目しか選択できない） ・チェックボックス  <input type=”checkbox”> 選択肢のなかから、複数選択ができるボタン （※同一name属性はひとまとまりのデータとして扱われる） ・value属性 選択項目をデータとして送信する際に、データの受けとり手に値を知らせます。 ・name属性 要素（ここでは<input type=”●●”>）に名前をつけて、なんの要素（選択ボタン）であるかを指定します。   大石ゆかり typeを使うと他にもいろいろ設定できるんですかー？ 田島悠介 他にも送信ボタンであったり、文字を入力できるフォームも簡単に作れるんだよ！ 大石ゆかり へぇ〜じゃあアンケートページとかでよく使われてそうですね！   それでは具体的な実装方法をみていきましょう。   ラジオボタン ラジオボタンという名前は、昔の自動車に搭載されていたカーラジオが、ひとつの局のボタンを押すと、他の局のボタンが選択できない仕様だったことから来ているそうです。 ラジオボタンは選択肢のなかから、ひとつだけを選択する入力ツールになります。   <input type=”radio”>にname属性を”gender”、valueを”male”と”female”に設定して性別選択ボタンをつくりましょう。タグの終わりには、実際にブラウザで表示される項目名(男性・女性)を書きます。選択肢の値(value)が”male”と”female”の、”gender”という名前(name)がついたラジオボタン（<input type=”radio”>）です。 <input type="radio" name="gender" value="male">男性 <input type="radio" name="gender" value="female">女性   これでどちらか一方を選択できるボタンができました。   上記のHTMLをコピー&ペーストして、もうひとつラジオボタンをつくってみましょう。ここでは、Webページの訪問者からサイトを知った経緯を知りたいと仮定して、選択肢の値(value)にサイトを知るきっかけとなった項目を設定し、”trigger”という名前のついたラジオボタンをつくります。 <input type="radio" name="trigger" value="facebook">facebook <input type="radio" name="trigger" value="twitter">twitter <input type="radio" name="trigger" value="hatebu">はてなマーク <input type="radio" name="trigger" value="syoukai">知人からの紹介   今度は、”gender”と”trigger”の2つの選択ツールができました。 このとき、name属性を”trigger”に書き換え忘れて”gender”のままにしておくと、”gender”と名付けられたすべての項目「男性、女性、facebook、twitter、はてなブックマーク、知人からの紹介」から、どれか一つの項目を選択することになってしまいます。 複数の選択群をつくる際には、必ずカテゴリーごとにしっかりとname属性を分けるように注意しましょう。   [PR] Webデザインで副業する方法とはdisabled属性 disabled属性は、フォーム部品を無効化することができます。 この属性で指定することで、フォーム部品の選択や書き換えを行うことができます。 用途の目的としては、同じフォーム流用するが、ユーザーの選択肢によってdisabeld属性を使用し一部の選択肢の書き換えを禁止する時に使用します。 disabled属性の実例 <!DOCTYPE html> <html> <head><meta charset="UTF-8"></head> <body> <!-- 性別選択 --> <input type="radio" name="gender" value="male" disabled/>男性 <input type="radio" name="gender" value="male"/>女性
HTML

JavaScriptでフォームのボタンを無効にする方法を現役エンジニアが解説【初心者向け】

JavaScriptでフォームのボタンを無効にする方法について解説します。 実際のコードをもとに解説していきますので、理解を深めていきましょう。 また、入門向けのJavaSriptを学習できるサイトも紹介しているので、合わせてご覧ください。   そもそもJavaScriptについてよく分からないという方は、JavaScriptとは何なのかについて解説した記事を読むとさらに理解が深まります。 なお本記事は、TechAcademyのオンラインブートキャンプJavaScript/jQuery講座の内容をもとにしています。     田島悠介 今回は、JavaScriptに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 JavaScriptでフォームのボタンを無効にする方法について詳しく説明していくね！ 大石ゆかり お願いします！   HTMLのボタン要素とは ボタン要素は、ボタンを作成するHTMLの要素です。 inputタグでtypeプロパティをsubmitに設定した場合とbuttonタグの機能は基本的に一緒ですが、画像やテキストをinputタグで作成する場合より柔軟に指定できます。 formタグの中で、送信ボタンとして使用するケースが多いです。 代表的なプロパティとして、ボタンの種類を決定するtypeプロパティ/名前を指定するnameプロパティ/値を指定するvalueプロパティ/操作を無効にするdisabledがあります。 特にユーザーに正常でない値である時に送信できないように、buttonのdisabledプロパティはよく使用するので操作の方法をマスターしておきましょう。   JavaScriptでフォームのボタンを無効にする方法 JavaScriptでフォームのボタンを無効にするには、buttonタグをgetElementByIdやquerySelectorで取得しdisabledをtrueに変更する必要があります。 以下のコードで無効にできます。   const button = document.querySelector("#ボタンのID"); // または // const button = document.getElementById("ボタンのID"); button.disabled = true   jQueryでは、propメソッドでプロパティの値を簡単に操作できます。 Disabledプロパティは以下のように設定できます。   $('#buttonのid').prop('disabled',true);   [PR] Webデザインで副業する方法とは実際に書いてみよう それでは実際に書いてみましょう。 今回は、簡単なメールアドレスの入力フォームを作成して正規表現でフォームをチェックして正常なメールの場合のみ送信ボタンが使えるようにします。 メールアドレスの簡単なチェックは以下の正規表現で行います。 大文字小文字は区別せず、半角英数字と記号で構成されて@.が含まれているかをチェックします。   /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i   それでは書いていきます。 まずは以下のようにフォームを用意します。   <form> <input type="text" id="text-field" /> <button type="submit" id="submit-btn">送信</button> <p id="helper-text" style="color: red;"></p> </form>   そうしたら、inputタグ/buttonタグ/pタグを取得し、keyupイベント（キーボードから指が離れた時に発火するイベント）ごとにinputの内容をチェックしbuttonのdisabledプロパティの書き換え、pタグのテキストの付け替えを行います。   //　各種タグの取得 const input = document.querySelector("#text-field"); const button = document.querySelector("#submit-btn"); const p = document.querySelector("#helper-text"); // emailの正規表現 const emailRegex = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+.[A-Z]{2,4}$/i; // keyupイベントを拾う input.addEventListener("keyup", () => { // inputの中身を正規表現でチェック if (emailRegex.test(input.value)) { // 成功した場合は、disabledをfalseに button.disabled = false; p.textContent =
JavaScript

アンケートなどに役立つ！HTMLでチェックボックスを作成する方法【初心者向け】

HTMLでチェックボックスを作成する方法
webページでよく見かけるチェックボックス。自分で作成するとなると一見難しそうですが、実はHTMLで簡単に書くことができます。 今回はHTMLでチェックボックスを作成する方法について解説していきたいと思います。 HTMLについてそもそもよく分からないという方は、HTMLとは何なのか解説した記事をまずご覧ください。   なお本記事は、TechAcademyのWebデザインオンラインブートキャンプのカリキュラムをもとに執筆しています。   チェックボックスを作成するタグとその書き方 チェックボックスはinputタグを使用することで作成することができます。 以下のコードのようにinputタグのtype要素を”checkbox”に指定することによって、チェックボックスを生成することができます。 <input type="checkbox">チェックボックス1 このようにとても簡単にチェックボックスを生成することができます。   大石ゆかり チェックボックスって何ですか？ 田島悠介 formタグの部品で、複数回答ができる選択肢を作れるタグなんだよ。 大石ゆかり アンケートや複数カテゴリーの選択に向いてそうですね。 田島悠介 その通り！では、実際に書いてみよう。   実際に書いてみよう それでは実際にチェックボックスを作成していきましょう。 今回は簡単な例として1,2,3と三つチェックボックスを作成していきましょう。 <input type="checkbox" name=“sample” value="1">1 <input type="checkbox" name=“sample” value="2">2 <input type="checkbox" name=“sample” value="3">3 まずinputタグを作成し、typeをcheckboxに指定します。そのあとのname、valueですが、checkboxを使用して、実際にデータを受け渡しする際に必要になってくる要素です。 上の例の場合sampleというパラメーター要素の中に選択したvalueが入るというcheckboxになります。 また、checkboxは以下のようにcheckedを指定すると、選択された状態のcheckboxを作成することもできます。 <input type="checkbox" name=“sample” value="1" checked="checked"> [PR] Webデザインで副業する方法とはまとめ いかがでしたでしょうか。今回は、HTMLでチェックボックスを作成する方法について解説していきました。 HTMLでタグのタイプを変更するだけで簡単にチェックボックスが作成できたことがわかっていただけたかと思います。 inputタグはこの他にも色々なtypeを使用することができるので、気になる方は検索してみましょう。   大石ゆかり checkedとvalue属性とname属性が新たに追加されてますね。 田島悠介 checkedは、最初に表示されているときに、あらかじめチェックした状態にしておくことが出来るんだよ。 大石ゆかり value属性の値が違うのに、name属性は3つとも同じになっていますね。 田島悠介 フォームで送信したデータは、PHPプログラムなどで受け取ることが出来るんだよ。nameは種類を表していて、その種類の値がvalue値だった、というふうに受け取れるんだよ。今は、まだ覚えなくてもいいよ。   [お知らせ]TechAcademyでは初心者でもオリジナルWebサイトを公開できるWebデザインオンラインブートキャンプを開催しています。
HTML

HTMLで複数のチェックボックスを横並びに配置する方法を現役エンジニアが解説【初心者向け】

HTMLで複数のチェックボックスを横並びに配置する方法について、テックアカデミーのメンター（現役エンジニア）が実際のコードを使用して初心者向けに解説します。   目次checkboxとはcheckboxをdisabledにする方法実際に書いてみようまとめ監修してくれたメンター   そもそもHTMLの記述方法がわからない場合は、 HTMLの書き方について解説した記事を読むとさらに理解が深まります。   田島悠介 今回は、HTMLに関する内容だね！ 大石ゆかり どういう内容でしょうか？ 田島悠介 複数のチェックボックスを横並びに配置する方法について詳しく説明していくね！ 大石ゆかり お願いします！   チェックボックスを実装する方法 チェックボックスは、inputタグのtype属性に「checkbox」と指定することで実装できます。 一般的には、HTML内で以下のように実装されます。   最も簡素な例 <form> <input type="checkbox">選択肢テキスト <input type="checkbox">選択肢テキスト </form> See the Pen チェックボックスを実装する方法_最も簡素な例 by nomallica (@nomallica) on CodePen. labelタグを使用した例 labelタグを使用することで、選択肢テキスト部分でもチェックが入れられるようになります。 以下のように選択肢テキストをlabelタグで囲み、for属性の値をinputタグのid属性と合わせることで実装できます。 <form> <input type="checkbox" id="check1"><label for="check1">選択肢テキスト</label> <input type="checkbox" id="check2"><label for="check2">選択肢テキスト</label> </form> See the Pen チェックボックスを実装する方法_labelタグを使用した例 by nomallica (@nomallica) on CodePen. さらにfieldsetタグでグループ分けした例 fieldsetタグでチェックボックスをグループ化した例が、以下の通りです。 inputタグにname属性を追加することで、グループとの関連付けができます。 <form> <fieldset> <input type="checkbox" id="check1" name="group1"><label for="check1">選択肢テキスト</label> <input type="checkbox" id="check2" name="group1"><label for="check2">選択肢テキスト</label> </fieldset> <fieldset>
HTML

あなたの目的に合わせて学べるコース

副業したい方

Web制作の力を身につけ
副業までサポート

はじめての副業コース

転職したい方

未経験から
Webエンジニアに

Webエンジニア転職保証コース

スキルアップしたい方

AIも統計解析もできる
Pythonを学ぶ

Pythonコース

※ 経済産業省の行うリスキリングを通じたキャリアアップ支援事業の補助金対象コースです。条件を満たすことで支払った受講料の最大70％がキャッシュバックされます。詳しくは こちら のページをご確認ください。

TechAcademyから
現役エンジニアの方へ
お知らせ

オーダーメイドコース
TechAcademy（テックアカデミー） Webデザインコース Webデザイン HTML HTMLのcheckboxをdisabledにする方法を現役エンジニアが解説【初心者向け】