【JavaScript】要素に設定されたdisabled属性の有効化と無効化の方法
Kこんにちは！CODE CLUB965のKです！
今回はHTML要素に設定されたdisabled属性の有効化と無効化をJavaScriptで行う方法について書こうと思います。
ちなみに前回の記事ではdisabled属性の使い方について解説していますので、まだ読んでいない方は読んでみて下さい。
disabled属性の有効化・無効化をJavascriptで切り替える方法
例えばWebサイトでよく見かける例でいいますと、情報入力の際に「情報をメールで受け取る」のチェックボックスがあったとして、チェックを入れた場合だけメールアドレス入力できる入力欄などがあります。
この説明だけだとよく分からないかもしれないので、サンプルコードと一緒に見てみましょう。
まずは、htmlファイル側です。
<!DOCTYPE html>
<html lang="jp">
<head>
<meta charset="UTF-8">
<title>sample</title>
<script type="text/javascript" src="sample.js"></script>
</head>
<body>
<div>Email</div>
<input type="text" id="email" disabled><br>
<input type="checkbox" id="checkbox" value="" onchange="change()">
<span>情報をメールで受け取る</span>
</body>
</html>disabled属性の有効化・無効化をJavascriptで切り替えるためにjsファイルには以下のように記述します。
以下をsample.jsファイルとします。
function change() {
var element;
if(document.getElementById("checkbox").checked) {
element = document.getElementById("email");
element.disabled = false;
}else {
element = document.getElementById("email");
element.disabled = true;
}
}上記のように記述することで、チェックボックスにチェックを入れるかどうかで有効化と無効化を切り替えることができます。
以下のような感じです。
情報をメールで受け取る
簡単に解説
簡単に解説します。
チェックボックスがクリックされる度にJavascript側の処理で判定を行っています。
jsファイルのif文で記述しているところです。
if(document.getElementById("checkbox").checked){
// 実行する処理
}これによりチェックボックスにチェックが入ったかどうかを確認し、処理を実行しています。
チェックが入っている場合は「false」を返し、disabled属性を無効化します。
逆にチェックが入っていない場合は「true」を返し、disabled属性を有効化します。
これだけで、要素に設定されたdisabled属性の有効化と無効化を行うことができます。
最後に
今回はHTML要素に設定されたdisabled属性の有効化と無効化をJavaScriptで行う方法について紹介しました。
JavaScriptを使ってWebサイトに動きをつけることは必須と思いますので、今回紹介したようなよく見るものについてはしっかり押さえておきましょう。
それでは、また！
Follow me!
