JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】
初心者向けにJavaScriptでフォーム要素にdisabledを設定・解除する方法について現役エンジニアが解説しています。disable属性を設定すると値の入力や送信ができなくなります。JavaScriptで設定・解除するには要素を取得して値を設定しましょう。
TechAcademyマガジンは受講者数No.1のオンラインプログラミングスクールTechAcademy [テックアカデミー]が運営。初心者向けに解説した記事を公開中。現役エンジニアの方はこちらをご覧ください。
JavaScriptでフォーム要素にdisabledを設定・解除する方法について、TechAcademyのメンター(現役エンジニア)が実際のコードを使って初心者向けに解説します。
JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。
なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

今回は、JavaScriptに関する内容だね!

どういう内容でしょうか?

JavaScriptでフォーム要素にdisabledを設定・解除する方法について詳しく説明していくね!

お願いします!
disabledとは
disabledは無効を示す属性です。
値を送信したくないフォーム要素に対して、disabled属性を設定するとその値は送信されなくなります。
以下は、disabledを使用するコード例です。
<form action="/some/form" method="POST"> <input type="text" name="name" placeholder="name"> <input type="text" name="disabled_name" placeholder="diabled name" disabled> <input type="submit"> </form>
また、disabled属性が設定されている場合、値の編集も不可能になります。
フォーム要素にdisabledを設定する方法
querySelectorメソッドやgetElementByIdメソッドなどでinput要素を取得後、disabled = true とすることでdisabled属性を設定できます。
let inputElement = document.querySelector('input[name="name"]'); inputElement.disabled = true;
JavaScriptのライブラリであるjQueryにはpropメソッドを使います。
let inputElement = $('input[name="name"]'); inputElement.prop('disabled', true);
[PR] JavaScript・jQueryで挫折しない学習方法を動画で公開中
フォーム要素のdisabledを解除する方法
querySelectorやgetElementByIdなどで input 要素を取得後、disabled = false とした場合には disabled 属性を解除できます。
let inputElement = document.querySelector('input[name="name"]'); inputElement.disabled = false;
jQueryの場合にはpropメソッドを使います。
let inputElement = $('input[name="name"]'); inputElement.prop('disabled', false);
実際に書いてみよう
以下のHTMLに対して、disabledを設定・解除してみましょう。
<form action="/some/form" method="POST"> <input type="text" name="name" id="name"> <input type="number" name="age" id="age"> <input type="number" name="weight" id="weight" disabled> <input type="submit"> </form>
まずは名前の入力欄(name=”name”)に対して disabled を設定します。
let nameInput = document.querySelector('input[name="name"]'); nameInput.disabled = true; // jQuery の場合 nameInput = $('input[name="name"]'); nameInput.prop('disabled', true);
次に年齢の入力欄(id=”age”)に対してdisabledを設定してみましょう。
let weightInput = document.getElementById('input#age'); ageInput.disabled = true; // jQuery の場合 ageInput = $('input#age'); ageInput.prop('disabled', true);
最後に体重の入力欄(name=”weigth”)の disabled を解除します。
let weightInput = document.getElementById('input#weight'); weightInput.disabled = false; // jQuery の場合 weightInput = $('input#weight'); weightInput.prop('disabled', false);
執筆してくれたメンター
メンター稲員さん
フリーランスエンジニア。大手SEからフリーランスのWeb系エンジニアにジョブチェンジ。 経験言語:Ruby、Rails、Python、C/C++、Java、Perl、HTML/CSS3、JavaScript、CoffeeScript、Node.js。おうち大好きマンです。 |

JavaScriptでフォーム要素にdisabledを設定・解除する方法はよくわかったかい?

はい、input要素を上手く使うことが大事なことがわかりました!

ゆかりちゃん、これからも分からないことがあったら質問してね!

分かりました。ありがとうございます!
TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。
また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。