JavaScript

disabled属性でbuttonのオンオフを切り替えよう！【js】

ニャンコ
ニャンコ

buttonやinputでフォームを作ったけど、入力のオンオフの切り替え方が分からないよ～

それは、disabled属性で簡単に切り替えられるよ！
disabled属性は、日本語で無効という意味だよ。

ワンコ
ワンコ

disabled属性を指定することで、ユーザーからの操作を無効化できるんだ！

ワンコ
ワンコ

完全無料スクールPR

これから始めるWEB制作

初心者のための【ZeroPlus Gate】

ワンコ
ワンコ

「ZeroPlus Gate」は、30日間限定で完全無料で学べるプログラミングスクールです。

その名の通り、WEB制作を「0」からスタートする初心者に特化したカリキュラムを提供しています。
分かりやすい動画講座を通じて、プログラミング未経験者でもスムーズにWEB制作を学ぶことが可能です。

さらに、わからない点があれば何度でも質問し放題！独学で行き詰まってしまった方にも最適な環境が整っています。
加えて、カウンセリングを通じて、将来的なキャリア設計や学習の進め方についてもアドバイスを受けることができます。

ワンコ
ワンコ

私自身、このスクールを受講しましたが、正直なところ「なぜこれが無料なのか？」と驚くほど充実したカリキュラムでした。独学でWEB制作を学んでいた頃と比べ、理解度が圧倒的に向上したと実感しています。

有料スクールへの勧誘も一切なく、安心して気軽に学習を始められるのが魅力的です。

ポイント

・完全無料で利用できる（マジで無料です）
・30日間限定でWeb制作の動画講座を見放題
・専属メンターが面談で学習をサポート
・Slackで講師に何回でも質問できる
・しつこい勧誘もなし！

\ 完全無料で学んでみる /

無料受講はこちらから

disabled属性の指定の仕方

disabledの指定の仕方を見ていきます。
下記は主要なフォームパーツですが、特に何も指定していないので操作が可能だと思います。
これを無効化していきます。

指定はとても簡単で、それぞれのフォームに対して「disabled」もしくは、「disabled="true"」を指定するだけです。

<input type="text" disabled>
<input type="checkbox" disabled>
<input type="radio" disabled>
<select disabled="true">
  <option>選択</option>
</select>
<button disabled="true">ボタン </button>

ｊｓを使用したdisabled属性の切り替え

「disabled="true"」と「disabled="false"」のようにtrueとfalseを切り替えることでフォーム要素のオンオフを切り替えることができます。

オンとオフの切り替えボタンを作成しましたので、お試しください。

ソースは下記のとおりです。

// オフボタンを押したときの処理　各フォームパーツを無効化する
document.getElementById('off').addEventListener('click',function() {
  document.querySelector('input[name="txt"]').disabled = true;
  document.querySelector('input[name="checkbox"]').disabled = true;
  document.querySelector('input[name="radio"]').disabled = true;
  document.querySelector('select[name="select"]').disabled = true;
  document.querySelector('button[name="button"]').disabled = true;
})

// オンボタンを押したときの処理　各フォームパーツを有効化する
document.getElementById('on').addEventListener('click',function() {
  document.querySelector('input[name="txt"]').disabled = false;
  document.querySelector('input[name="checkbox"]').disabled = false;
  document.querySelector('input[name="radio"]').disabled = false;
  document.querySelector('select[name="select"]').disabled = false;
  document.querySelector('button[name="button"]').disabled = false;
})
ニャンコ
ニャンコ

今回はボタンクリックイベントだったけど、各々仕様に沿った処理に変更するといいよ！

-JavaScript
-, ,