JavaScript

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

ニャンコ
ニャンコ

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

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

ワンコ
ワンコ

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

ワンコ
ワンコ

オススメ無料スクールPR

ZeroPlus Gate

総合評価 ：

完全無料のプログラミングスクール。
30日間限定で、動画講座を見放題。
また、不明点は何度でも講師に質問し放題でした。
さらに、カウンセリングを通して、将来的キャリア形成についてや学習のアドバイスが貰える！

・完全無料で利用できる
・30日間Web制作の動画講座を見放題
・カウンセリングで相談可能
・Slackで講師に何回でも質問できる

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

ZeroPlus Gate申し込みはこちら！

毎月人数制限があるので早めにチェックしましょう！

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
-, ,