【JavaScript】要素にdisabledを設定・解除・判定する方法

こんにちは、Ryohei（@ityryohei）です！

本記事では、JavaScriptのフォーム要素にdisabledを設定・解除する方法のご紹介をご紹介しています。フォーム要素にdisabledを設定することで入力・選択ができないようにすることが可能になります。

上記の疑問にお答えします。

では解説していきます。

disabledとは

そもそもdisabledとはどういう意味なのでしょうか。Google翻訳で訳してみると下記の結果が返ってきます。

HTMLにおけるdisabled属性も翻訳結果と似たような意味を持っていて、disabled属性が指定された要素は無効化されます。ここでいう無効化というのは、使用不可という意味になります。
下記を例に挙げますと、左が通常のボタン、右側がdisabled属性を設定したボタンになります。

See the Pen disabled1 | JavaScript by ryohei (@intotheprogram) on CodePen.

左のボタンと比べて右のボタンは若干薄い色になっており、クリックしても反応がないかと思います。disabledを指定して無効化、使用不可の状態となっているためです。

disabledは要素を無効化する属性だと認識していただければと思います。

disabledの設定方法

disabledの設定方法になります。

下記のHTMLフォームからbutton要素を取得してdisabledを設定してみます。disabledの設定はスクリプトから行います。

HTML

<form name="contactForm" action="#">
  <input name="fullname" type="text" >
  <button name="submit">Send</button>
</form>

JS

let formElements = document.forms.contactForm;
formElements.submit.disabled = true;

DEMO

See the Pen disabled2 | JavaScript by ryohei (@intotheprogram) on CodePen.

disabledの解除方法

JavaScriptでdisabledを解除する方法です。HTMLで設定しているdisabled属性をスクリプトで解除しています。

HTML

<form name="contactForm" action="#">
  <input name="fullname" type="text" >
  <button name="submit" disabled>Send</button>
</form>

JS

let formElements = document.forms.contactForm;
formElements.submit.disabled = false;

DEMO

See the Pen disabled3 | JavaScript by ryohei (@intotheprogram) on CodePen.

disabledの判定方法

JavaScriptでdisabledを判定する方法になります。disabled属性の状態を判定して、true／falseの値によって処理を分岐したい場合に使用します。

<form name="contactForm" action="#">
  <input name="fullname" type="text" >
  <button name="submit">Send</button>
</form>

JS

let formElements = document.forms.contactForm;
formElements.submit.disabled = true;

if(formElements.submit.disabled){
  //disabled時の処理を記述
}

DEMO

See the Pen disabled4 | JavaScript by ryohei (@intotheprogram) on CodePen.

inputにdisabledを設定する際の注意点

input要素にdisabled属性を設定する際の注意点をご紹介します。
disabledは指定した要素を使用不可にする属性です。使用不可となるため、値を送信することができなくなります。スクリプトでinput要素にdisabled属性を指定した場合も同様に、値を送信することができなくなります。
disabledを設定する際にはご注意いただければと思います。

まとめ

最後に、JavaScriptでdisabledを設定・解除・判定する方法をまとめます。

設定	formElements.submit.disabled = true;
解除	formElements.submit.disabled = false;
判定	formElements.submit.disabled;

以上、JavaScriptで要素にdisabledを設定・解除・判定する方法のご紹介でした！
disabled属性はフロント側で入力を制限する際に役に立つ属性です。スクリプトから操作することが可能ですので、動的なフォームの構築に使用いただければ幸いです。