CSSでdisabledを使うには?入力フォームをJavaScriptで制御する方法も解説

公開日: 2021.12.17
更新日: 2024.01.03
CSSでdisabledを使うには

CSSのセレクタで「:disabled」という記述を見たことはありませんか?

disableは、無効になった要素を表すCSS疑似クラスです。

どんなときに使うものなのか気になりますよね。

今回は、CSSのdisabledについて、使い方などを詳しく知りたいという方のために、

  • disabledとは
  • disabledを使う場面について
  • JavaScriptを使った制御方法

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

この記事を読めば、CSSのdisabledの使い方や使用場面などが分かるようになりますよ。

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

disabledとは?

disabledは、CSSの疑似クラスとして、要素の後ろに記述します。

具体的には、以下のように書きますね。

input:disabled {
  background: #ccc;
}

上記のように書かれたスタイルは、その要素が無効化されているときに適用されます

無効化されているとは、要素にdisabled属性が指定されている状態のことです。

テキスト入力やチェックボックスなど、ユーザーが操作する要素に指定されるもので、無効化のときには入力やクリックなどの操作ができなくなります。

HTMLでは、以下のようにdisabledを指定できます。

<form action="#">
  <label for="name">名前:</label>
  <input type="text">
  <label for="age">年齢:</label>
  <input type="text" disabled>
</form>

名前の欄は入力ができますが、年齢は入力もフォーカスもできないことが確認できるでしょうか?

先ほどのCSSを使うことで、背景色を灰色にして記入できないことを視覚的に示すことができます。

JavaScriptによるdisabledのオンオフ

HTMLで直接指定するだけでなく、JavaScriptを用いることで、ユーザーの操作で無効化のオンオフを切り替えられるようにできます。

<label><input type="checkbox" name="check" onclick="click1()">入力する</label>
<input type="text" id="text-box" disabled>

JavaScriptでは、以下のように記述します。

function click1(){
    if (document.getElementById("text-box").disabled === true){
        document.getElementById("text-box").disabled = false;
    }else{
        document.getElementById("text-box").disabled = true;
    }
}

上記のコードでは、最初にチェックボックスと無効化された入力欄を表示させています。

チェックボックスにチェックを入れると、無効化が解除され入力欄に記入できるようになり、チェックを外すと再び入力できなくなります。

「onclick=”click1()”」の指定により、チェックボックスをクリックをするたびに、JavaScriptの処理が実行されます

「document.getElementById(“text-box”)」は、IDが「text-box」の要素を取得します。

この要素に「disabled」が適用されているかどうかを判定し、適用されていればfalseで外して、適用されていなければ、trueで付け加えています。

プログラミングをまだよく知らないという方は、そちらも勉強してみることをおすすめします。

disabledを使う場面とメリットについて

CSSのdisabledの使い方、HTMLの要素のdisabled属性について解説してきました。

また、JavaScriptで無効化のオンオフを切り替える方法も紹介しましたね。

では、この無効化の機能は、どういった場面で利用できるのでしょうか?

HTMLタグの中にdisabledを指定できる要素は、以下のものとなっています。

  • <input>
  • <textarea>
  • <fieldset>
  • <select>
  • <option>
  • <button>

フォームの中で使われる要素ですね。

disabledは、主にユーザーの操作によってフォーム内の状態を変える目的で使用されます。

先ほどにもチェックしないと入力できないフォームを紹介しましたね。

そういった条件によって表示を切り替えるシステムを作るのに適しています。

テキストを入力しないとフォームを送信するボタンが押せない、といった仕組みを作ることもできますね。

このときに、「入力できない」「送信できない」といったことがはっきりと伝わるようなデザインにすることが大切です。

CSSのdisabledは、無効化を視覚的にわかりやすくするために使用しましょう。

まとめ:disabledの指定にはプログラミングも重要

今回は、CSSでdisabledを使う方法とその使い道について解説してきました。

フォーム内のHTMLタグにdisabledが加わると、要素を無効化することができるため、そのスタイル指定に使うということでしたね。

JavaScriptで切り替える方法も紹介しました。余裕がある方は、プログラミングについても学習を進めてみてくださいね。

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

関連記事

資料請求

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

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

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

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

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

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

    資料をダウンロードする

© 2024 WEBCAMP MEDIA Powered by AFFINGER5