JavaScriptでフォーム要素にdisabledを設定・解除する方法を現役エンジニアが解説【初心者向け】

初心者向けにJavaScriptでフォーム要素にdisabledを設定・解除する方法について現役エンジニアが解説しています。disable属性を設定すると値の入力や送信ができなくなります。JavaScriptで設定・解除するには要素を取得して値を設定しましょう。

TechAcademyマガジンはオンラインのプログラミングスクールTechAcademy [テックアカデミー]が運営する教育×テクノロジーのWebメディアです。初心者でもすぐ勉強できる記事が2,000以上あります。

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サービス公開を習得できる、オンラインブートキャンプを開催しています。

また、現役エンジニアから学べる無料体験も実施しているので、ぜひ参加してみてください。