jQuery｢prop｣でプロパティの値を取得/設定

2020年5月6日

jQueryのメソッド「.prop() 」は、要素の「プロパティ値を取得/設定する」事ができるメソッド。

今回は、jQueryで「プロパティ値を取得/設定できる」メソッド「.prop()」について、その使い方をサンプルを交えて解説しよう。

.prop()メソッドとは

.prop()は主に「チェックボックス」や「ラジオボタン」などのプロパティ値（選択値）を取得・設定するために使うメソッドだ。（ver1.6以降）

.prop()と.attr()の違いは？

.prop()は「プロパティ」、.attr()は「属性」を操作できるメソッドで、ほとんど同じような働きをする。

属性・プロパティとは

「属性」はHTMLの情報で、「プロパティ」は「JavaScriptが独自に保持するHTMLの属性情報」で、基本的には同じ内容の情報なのだが、次の例のように一部異なるものがある。

.attr()はHTML属性を取得・設定できるメソッドで、「実行時点でHTMLコードに記述されている情報」しか取得できないので、フォームのcheckedやdisabledやselectedやmultipleなどユーザーの操作後の値を取る事はできなかった。

そこで、jQuery1.6より新たに、JavaScriptが保有する「プロパティ」を操作できる.prop()メソッドが追加されたのだ。

例えば次のようなチェックボックスで初期値でチェックが入っていないものを.prop()と.attr()でそれぞれ値を取得してみると

<input type="checkbox" >

.prop()は「false」と返すのに対して、.attr()では「undefined」と返す。

その後、ユーザーがチェックを入れた後に同じ様に.prop()と.attr()でそれぞれ値を取得してみると、.prop()は「true」と返すのに対して、.attr()では、チェックが入っているのにも関わらず、また「undefined」と返してしまう（ユーザーがチェックを入れてもHTMLが書き換わるわけではない為）。

つまり、フォーム関連やcheckedやdisabledやselectedなどの場合は、.attr()ではなく、.prop()を使って操作すると良いという事だ。

.attr()メソッドについて詳しく知りたい方はこちらの記事をどうぞ。

▶ jQuery｢attr｣で属性値を取得/設定する方法

jQueryのメソッド「.attr()」は、要素の「属性値を取得/設定する」事ができるメソッド。今回は、jQuery…

.prop()の構文

.prop()ではプロパティ値を「取得」と「設定」ができる。また、「一度に複数のプロパティ値」を設定する事もできるので、順番に解説していこう。

プロパティ値を取得する構文

.prop()でプロパティ値を取得する構文

$("セレクタ").prop("プロパティ名");

セレクタで指定した要素に対して.prop()のパラメータで「プロパティ名」だけを記述した場合は、そのプロパティ値を取得できる。

「取得」した値を後で使う場合は、次のように変数に格納すると使いやすい。

var hoge = $("input").prop("checked");

プロパティ値を設定する構文

.prop()でプロパティ値を設定する構文

$("セレクタ").prop("プロパティ名","値");

プロパティ値を変更したい要素を「セレクタ」で指定し、.prop()のパラメータの第１引数で「プロパティ名」、さらに,で区切った後の第２引数で「値」を指定する事で、指定要素の「プロパティ値」を設定・変更する事ができる。

一度に複数のプロパティ値を設定する構文

.prop()で複数のプロパティ値を設定する構文

$("セレクタ").prop({プロパティ名:"値",プロパティ名:"値",プロパティ名:"値"});

一度に複数のプロパティ値をセットする場合は「オブジェクト形式」で{}の中で属性名:"値",の組み合わせを複数設定する事ができる！（真偽値の場合は""は不要）

jQueryで.prop()を使ってプロパティ値を「取得」する例

まずはチェックボックスの値を取得する例で見ていこう。

jQuery

$(function(){
   $("button").on("click",function(){
       var hoge = $(".target").prop("checked");
       console.log(hoge)
   });
});

HTML （ロード時）

<button>ボタン</button>
<input class="target" type="checkbox" checked>

Console

true

このように書く事で$(".target")のプロパティcheckedの値（チェックされている：true、チェックされていない：false）を取得できる。

jQueryで.prop()を使ってプロパティ値を「設定」する例

次に.prop()を使って、ボタンを押したらチェックボックスに「チェックが入っていないもの」に対して、「チェックを入れる」という例で見ていこう。

jQuery

$(function(){
   $("button").on("click",function(){
       $(".target").prop("checked",true);
   });
});

HTML （ロード時）

<button>ボタン</button>
<input class="target" type="checkbox">

ブラウザ上

ブラウザ上：ボタンクリック後

このように書く事で$(".target")のプロパティcheckedの値を変更する事ができる。

jQueryで.prop()を使って、一度に「複数のプロパティ値を設定」する方法

一度に複数のプロパティ値を設定する例として、ボタンをクリックすると、チェックボックスにチェックが入り、さらに無効化（disabled）

う。

jQuery

$(function(){
   $("button").on("click",function(){
       $(".target").prop({disabled:true,checked:true});
   });
});

HTML （ロード時）

<button>ボタン</button>
<input class="target" type="checkbox" >

ブラウザ上

ブラウザ上：ボタンクリック後

このように書く事で$(".target")のチェックボックスのプロパティcheckedの値を変更した上で、さらに無効化（disabled ）する事ができる。

以上、jQueryで「.prop()を使って、プロパティ値を取得/設定する」方法でした。

その他のjQueryメソッドについて確認したい方は、jQueryメソッドを一覧で解説したこちらの記事を確認しておこう！

▶ jQueryの「メソッド一覧」と使い方

jQueryの沢山あるメソッドの一覧を解説してほしいjQueryのメソッド一覧を確認して、jQueryを自由に操れるよ…

フロントエンドスキルをもっと早く・簡単にマスターしたい方へ！

JavaScriptやCSS・Sassなどフロントエンド学習は、初心者が「独学」で完全マスターするには半年以上かかり、相当根気よくやらないと挫折してしまうか、ライバルに出遅れてしまう…。

短期間でフロントエンド・WEBデザインをマスターするには？

私の経験だが、手軽なオンラインスクールを利用した方が圧倒的に早かった。独学だと「何からどこまで勉強すれば良いかわからない」ものを、これだけ学習すればOKというポイントをおさえた教科書で学習しながら、わからない点を質問し放題なので、多少の出費は必要だが２ヶ月程度でサクッと学べたので逆に経済的だった！（実際に私がオンラインスクールを受講して体感）

では「オススメはどのスクール？」とよく聞かれるのだが、たった１つのおすすめスクールがある訳でなく、その人によって最適なスクールが違う。

スクール選びのポイント