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

JavaScriptでフォーム要素にdisabledを設定・解除する方法について、TechAcademyのメンター（現役エンジニア）が実際のコードを使って初心者向けに解説します。

JavaScriptについてそもそもよく分からないという方は、JavaScriptとは何なのか解説した記事をまずご覧ください。

 

なお本記事は、TechAcademyのオンラインブートキャンプ、JavaScript/jQuery講座の内容をもとにしています。

 

 

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。おうち大好きマンです。

 

 

TechAcademyでは、初心者でも最短4週間で、JavaScript・jQueryを使ったWebサービス公開を習得できる、オンラインブートキャンプを開催しています。

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