【jQuery入門】disabled属性の意味と使用方法・attr()とprop()の違いとは？

Web開発者やWebデザイナーには、アニメーションやエフェクトを駆使した華やかなWebサイトやレスポンシブサイトの構築、大量の情報を効率よく見せるためのインタラクティブなナビゲーションを持つWebアプリなど、多様な機能や役割をもつメディアを作成できる能力が求められています。

「jQuery」は、アニメーションやエラーチェック機能などを作成するためによく使われる「JavaScript」のライブラリです。

主な使い道として、以下のようなものがあります。

• スマートフォンサイトのメニューの開閉
• 画像のスライドショーやギャラリー
• ボタンをクリックした時のアニメーション
• ユーザー入力フォームのエラーチェック

この他にも多種多様な使い方がありますが、今回はjQueryの中でも使用頻度の高い「disabled」属性について解説します。

【基礎知識】jQueryとはなにか？

通常、動きのあるWeb部品を作成するためには、JavaScriptでコードを記述します。

JavaScriptは、HTMLとCSSを操作するためのプログラミング言語です。しかし、JavaScriptを使用して複雑な動きをつけようとすると、コードが長く複雑になりがちです。

そんなJavaScriptを扱う際、DOM操作を効率的に行うために使われるライブラリが「jQuery」です。jQueryを利用することで、複雑なJavaScriptコードをシンプルに記述でき、可読性と保守性が向上します。

また、サーバーにjQueryファイルを読み込ませて、HTMLに実行文を追加するだけで使用できるjQueryプラグインも数多く配布されています。

しかし、配布されているプラグインやサンプルコードだけでは目的の成果物を開発できないことも多く、使いたい目的によってカスタマイズするには、jQueryの記述方法を覚える必要があります。Web業界で開発を行うエンジニアであれば、基礎から学んでおいた方がよいでしょう。

まずは、jQueryに関わる基本的な用語を説明します。

タグとは

HTMLの基本要素であり、要素を区切るためのマークアップです。<button><input><div>などが代表的なタグに挙げられます。

属性とは

属性とは、そのタグを構成しているパーツのことです。

たとえば

<a href=”xxx” target=”_blank”> リンクする文字列</a>

というタグの場合、「href 」と「target」が属性となり、イコール(=)で指定した「xxx」や「_blank」が値となります。

タグに属性をつけることで、より具体的な指示を付加することができます。

この場合でいうと、<a>というaタグで、「href」属性の値がリンク先のURLを指定し、「target」属性の値がリンク先のウインドウ（「_brank」はブラウザで新しいウインドウを開いて表示する）という意味です。

セレクタとは

セレクタとは、CSSやjQueryで操作するHTMLの要素を指定する記述です。

たとえば、pタグ（「Paragraph」の略。文章のひとかたまりを表す）のセレクタは、

$(‘ｐ’)

のように記述します。

jQueryでのCSS操作

jQueryでよく使われる例として、CSSの操作があります。

$(“セレクタ”).css(“プロパティ” , “値”)

このような形で記述することで、CSSの値を取得したり書き換えたりすることが可能です。

たとえば、以下のコードでは、すべてのaタグの文字色を「赤」にします。

$(“a”).css(“color”,”#f00″);

jQueryの導入方法

jQueryを使用するためには、CDN（Content Delivery Network）経由でライブラリを読み込む方法と、ローカルにダウンロードして使用する方法があります。

CDNを利用する場合

CDNを利用すると、最新版のjQueryを手軽に導入できます。

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

ローカルに保存する場合

公式サイトからjQueryのファイルをダウンロードし、ローカル環境に設置して<script>タグで読み込みます。

disabled属性の意味

disabledは、指定したHTML要素を無効化できる属性です。フォーム要素やボタンの動作を制限するために使用され、たとえば<button disabled>を記述すると、ボタンはクリックできなくなります。

disabled属性の使用方法

「disabled」は一般的に、HTMLのタグ内に属性として記述します。

それでは、具体的な使用方法について解説します。

ボタンの有効化・無効化

button要素にdisabled属性を設定すると、ボタンの有効化・無効化の処理が可能です。

たとえば、<button>ボタン</button>のようなbuttonタグを押せないようにしたいときには、以下のように記述します。

<button disabled>ボタン</button>

この「disabled」を消すと、ボタンが押せるようになります。

<button>ボタン</button>

これを切り替えることで、ボタンの有効化・無効化を操作することができます。

しかし、HTMLを書き換える必要があるので、これだけでは実用には向きません。

「ユーザーがテキストを入力したらボタンを押せるようにする」など、条件に合わせてHTMLの内容を書き換えるには、jQueryの制御文が必要になります。

「prop()」を使ったdisabledの制御

jQueryの関数を使うと、if文などの制御文が使えるので、タイミングを指定してdisabledの切り替えを制御することができます。

たとえば「prop()」メソッドを使うと、「button.prop( ‘disabled’, true)」でボタンは無効になり、「button.prop( ‘disabled’, false)」でボタンは有効になります。

「チェックボックスにチェックが入ったらボタンを押せるようにする」という場合のサンプルコードは、以下のとおりです。

この場合、ボタンの属性は「disabled」にしておきます。

$(function() {
  //チェックボックスにチェックが入ったら
  $(‘input[type=”checkbox”]’).change(function() {
    //ボタンを有効にする
    $(button).prop(‘disabled’, false);
  });
});
      

「enabled」属性でHTML要素を有効化

「disabled」の対になる属性に、「enabled」があります。

「enabled」はHTML要素を有効化する属性で、「is()」メソッドでは返す値の「true」と「false」が逆になります。

「disabled」と「enabled」は対義語として併せて覚えておくとよいでしょう。

「attr()」は使ってはいけない？

「prop()」メソッドと似た働きをするメソッドに、「attr()」があります。

どちらも、「指定した属性の値を取得する」メソッドですが、厳密には取得する値が異なります。

「attr()」は「属性における値」を取得し、「prop()」は「プロパティの真偽」を取得します。

チェックボックスにチェックが入っているかの判定をするコードを例として、返す値の違いを説明します。

$(“:checkbox”).click(function() {
  alert($(this).prop(‘checked’));     
  alert($(this).attr(‘checked’));
});

【 チェックが入っている場合 】

「prop()」では「true」を返します。

「attr()」では「checked」を返します。

【 チェックが入っていない場合 】

「prop()」では「false」を返します。

「attr()」では「undefind」を返します。

この場合、「attr()」では「checked」という属性を取得できず、「undefind」という値を返してしまいます。

予想外の値が返されると、エラーで動かなくなってしまうこともあります。

そのため、チェックボックスにチェックが入っているかの判定などには、「true」か「false」で値を返す「prop()」メソッドが適切です。

disabled属性が適用されないときの対処法

jQueryを使ってdisabled属性を設定したものの、期待通りにボタンやフォーム要素が無効にならないケースがあります。その原因には、次のようなものが考えられます。

attr()を使ってしまっている

まずは上述したattr()の問題です。attr()では見た目上の変更はできても、実際の動作に影響を与えないことがあります。

・attr()を使用した誤ったコード

$("#submitButton").attr("disabled", false);
// 意図した通りに動かないことがある

・prop()を使用した正しいコード

$("#submitButton").prop("disabled", false);
// 期待通り動作する

スクリプトの実行タイミングが適切でない

スクリプトの実行タイミングがDOMの読み込み前だと、対象の要素が存在しないため変更が適用されません。スクリプトは $(document).ready() 内で実行するのが基本です。

・誤ったコード

$("#submitButton").prop("disabled", false);
// ボタンがまだDOMにない場合、適用されない

・正しいコード

$(document).ready(function () {
  $("#submitButton").prop("disabled", false);
  // DOMが読み込まれた後に実行されるため、確実に適用される
});

CSS「pointer-events: none;」が適用されている

CSSの pointer-events: none; を設定している場合、disabledを解除してもクリックできないことがあります。JavaScript側でdisabledを解除する際にpointer-eventsも制御するとよいでしょう。

・CSS

button:disabled {
  pointer-events: none;
  opacity: 0.5;
}

・JavaScript

$("#submitButton").prop("disabled", false).css("pointer-events", "auto");

トラブル回避のためにも正しいメソッドを使用しよう

jQueryの中でも、とくに知っておきたい「disabled」属性の意味と、具体的な使い方を解説しました。

曖昧な理解のまま使っていると、予期せぬトラブルを発生させかねません。

属性の意味と、適切なメソッドを理解して使用することが大切です。

jQueryの情報は、インターネットや書籍でも簡単に入手できるので、学習しながらプログラミングを行いましょう。