働くエンジニアマガジン

2020.03.03

HTML要素のdisabled属性を有効化・無効化させる方法とは【初心者歓迎】

TOP
> 言語・スキル
> html
> HTML要素のdisabled属性を有効化・無効化させる方法とは【初心者歓迎】

TOPICS

1. HTML要素のdisabeled属性とは
2. HTML要素にdisabled属性を設定する方法
3. HTML要素に設定されたdisabled属性の有効化・無効化をJavascriptで切り替えよう
4. さいごに：HTML要素のdisabled属性をJavascriptで切り替る処理は実務では必須知識

HTML要素にはdisabled属性を持つものが存在し、画面上には要素が表示されている状態で有効・無効を切り替えることが可能です。

本記事では、HTMLでのdisabled属性の基本的な設定方法からJavascriptを用いた有効化・無効化の方法まで詳しく解説していきたいと思います。

HTML要素のdisabeled属性とは

HTML要素で利用可能なdisabled属性は、対象の要素を非活性にすることが出来る属性です。

あくまで非表示にするのではなく、ブラウザ上には表示した状態で非活性とする属性となります。

disabled属性が利用可能なHTML要素とは

disabled要素が頻繁に利用されるHTML要素としては、「input」タグと「button」タグの存在が挙げられます。

「input」タグで「type=”text”」にdisabled属性を付与した場合、入力項目が非活性となり、文字入力が出来ない状態となります。

「button」タグの場合には、ボタンが非活性となり、クリックしても反応しない状態になります。

HTML要素にdisabled属性を設定する方法

HTML要素でdisabled属性を設定する方法は非常に簡潔で、HTMLタグに対して「disabled」を記述するだけです。

実際に「input」タグと「button」タグに対して、disabled属性付与前後のブラウザ表示を確認してみましょう。

inputタグにdisabled属性を設定してみよう

まずinputタグにdisabled属性を付与していない状態から確認していきましょう。

disabled属性なし

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>disabled Sample</title>
</head>
<body>
  <div>inputタグ</div>
  <input type="text">
</body>
</html>

<!DOCTYPE html>

<head>

<title>disabled Sample</title>

</head>

<body>

<div>inputタグ</div>

</body>

</html>

ブラウザで表示した結果が下記GIFで、テキストボックスをクリックすると文字入力可能な状態となります。

次にdisabled属性を付与してブラウザに表示してみます。

disabled属性付与

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>disabled Sample</title>
</head>
<body>
  <div>inputタグ</div>
  <input type="text" disabled>
</body>
</html>

<!DOCTYPE html>

<head>

<title>disabled Sample</title>

</head>

<body>

<div>inputタグ</div>

</body>

</html>

サンプルコードを実行した結果が下記のGIFで、テキストボックスをクリックしても入力状態に切り替わりません。

buttonタグにdisabled属性を設定してみよう

次にbuttonタグでdisabled属性有無による挙動の違いを確認してみましょう。

buttonタグのサンプルでは、GIFを観た際にボタンがクリックされているかを分かりやすくするためJavascriptでブラウザ上のテキストを変更する処理を記述しています。

disabled属性なし

まずはdisabled属性なしの挙動を確認していきます。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>disabled Sample</title>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div class="button-text">buttonタグ</div>
  <button type="button" onclick="change()">テキスト変更</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>disabled Sample</title>

</head>

<body>

<div class="button-text">buttonタグ</div>

<button type="button" onclick="change()">テキスト変更</button>

</body>

</html>

sample.js

function change() {
    var elements = document.getElementsByClassName("button-text");
    elements[0].innerHTML = "テキストが変更されました！";
}

function change() {

var elements = document.getElementsByClassName("button-text");

elements[0].innerHTML = "テキストが変更されました！";

}

サンプルコードを実行した結果が下記のGIFとなります。

disabled属性付与

次にdisabled属性を付与したサンプルコードを確認してみましょう。

「sample.js」に関しては上記と変わらず、「index.html」のみ下記の通りdisabled属性を追加しています。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>disabled Sample</title>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
  <div class="button-text">buttonタグ</div>
  <button type="button" onclick="change()" disabled>テキスト変更</button>
</body>
</html>

<!DOCTYPE html>

<head>

<title>disabled Sample</title>

</head>

<body>

<div class="button-text">buttonタグ</div>

<button type="button" onclick="change()" disabled>テキスト変更</button>

</body>

</html>

サンプルコードを実行した結果が下記のGIFで、ボタンが非活性状態となりクリック出来ないことをご確認頂けます。

HTML要素に設定されたdisabled属性の有効化・無効化をJavascriptで切り替えよう

HTML要素に設定されたdisabled属性の有効化・無効化をJavascriptで切り替える方法についてご紹介していきたいと思います。

今回はWebサイトでよく見かける「広告メールを受け取る」のチェックボックスを用意し、チェックを入れたユーザーに対してのみメールアドレス入力用のテキストボックスを有効化化させるサンプルコードを作成してみます。

Javascriptでdisabled属性の有効化・無効化を切り替える

では、まず今回使用するサンプルコードを掲載していきます。

index.html

<!DOCTYPE html>
<html lang="jp">
<head>
  <meta charset="UTF-8">
  <title>disabled Sample</title>
  <script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div>メールアドレス</div>
<input type="text" id="mailAdress" disabled><br>
<input type="checkbox" id="checkBox1" value="" onchange="change()"><span>広告メールを受け取る</span>
</body>
</html>

<!DOCTYPE html>

<head>

<title>disabled Sample</title>

</head>

<body>

<div>メールアドレス</div>

<input type="checkbox" id="checkBox1" value="" onchange="change()"><span>広告メールを受け取る</span>

</body>

</html>

sample.js

function change() {

    var element;
    if(document.getElementById("checkBox1").checked) {
        element = document.getElementById("mailAdress");
        element.disabled = false;
    }else {
        element = document.getElementById("mailAdress");
        element.disabled = true;
    }

}

function change() {

var element;

if(document.getElementById("checkBox1").checked) {

element = document.getElementById("mailAdress");

element.disabled = false;

}else {

element = document.getElementById("mailAdress");

element.disabled = true;

}

サンプルコードを実行した結果が下記のGIFとなります。

サンプルコード解説

今回のサンプルコードでは「id=”checkBox1″」の「onchange」メソッドでチェックボックスがクリックされる度にJavascript側の処理で判定を行っています。

Javascriptのif文でチェックボックスにチェックが入った状態かを確認するのが下記のコードです。

document.getElementById("checkBox1").checked

1	document.getElementById("checkBox1").checked

チェックが入っている場合「true」、入っていない場合には「false」と判定されます。

実際にHTML要素にdisabeld属性を設定しているのが下記のコードです。

element = document.getElementById("mailAdress");
element.disabled = true;

1 2	element = document.getElementById("mailAdress"); element.disabled = true;

disabled属性を設定したいHTMLタグのid属性を「getElementById」メソッドで取得し、取得した要素に対し「disabled=ture」と宣言すればHTML要素にdisabled属性が付与されます。

反対にdisabled属性を解除したい場合には「disabled=false」と宣言すれば解除可能です。

さいごに：HTML要素のdisabled属性をJavascriptで切り替る処理は実務では必須知識

本記事では、HTML要素のdisabled属性について、要素への設定方法からJavascriptでの有効化・無効化の方法についてご紹介してきました。

本文中のサンプルでご紹介したように、Webサイトにおいて入力項目の有効化・無効化をdisabeld属性で設定するのは頻出処理の1つです。

今回ご紹介した内容を参考に、様々なHTML要素でのdisabled属性の切り替え処理を試してみてください。

「実際にプログラミングを使えるようになりたい」方におすすめ！

ポテパンキャンプは卒業生の多くがWebエンジニアとして活躍している実践型プログラミングスクールです。 450名以上が受講しており、その多くが上場企業、ベンチャー企業のWebエンジニアとして活躍しています。

基礎的な学習だけで満足せず、実際にプログラミングを覚えて実践で使えるレベルまで学習したいという方に人気です。プログラミングを学習し実践で使うには様々な要素が必要です。

それがマルっと詰まっているポテパンキャンプでプログラミングを学習してみませんか？

▶︎ プログラミングの基礎を学びたい方はこちら

卒業生の多くがWebエンジニアとして活躍

転職先企業の例

卒業生の多くがWeb企業で活躍しております。
実践的なカリキュラムをこなしているからこそ現場でも戦力となっております。
活躍する卒業生のインタビューもございますので是非御覧ください。

卒業生インタビューはこちら

経験豊富なエンジニア陣が直接指導

実践的なカリキュラムと経験豊富なエンジニアが直接指導にあたります。
有名企業のエンジニアも多数在籍し品質高いWebアプリケーションを作れるようサポートします。

満足度高くコスパの高いプログラミングスクール「ポテパンキャンプ」

運営する株式会社ポテパンは10,000人以上のエンジニアのキャリアサポートを行ってきております。
そのノウハウを活かして実践的なカリキュラムを随時アップデートしております。

代表の宮崎もプログラミングを覚えサイトを作りポテパンを創業しました。
本気でプログラミングを身につけたいという方にコスパ良く受講していただきたいと思っておりますので、
気になる方はぜひスクール詳細をのぞいてくださいませ。

ポテパンキャンプの詳細はこちら >>