jQuery【 prop 】真偽値属性には prop メソッド

jQuery の prop メソッドを使用すると、attr メソッドと同様に 要素の属性に対して 値を設定したり変更したりすることができます。
そして、 checked や selected のように、指定されていれるか否かを true 又は false で表すことができる属性（真偽値属性）には、prop メソッドの使用が向いています。
今回は、jQuery の prop メソッドの使い方と attr メソッドとの違いを紹介したいと思います。

attr メソッドの使用方法についてはjQuery【 attr 】属性に値を設定する attr と 削除する removeAttrをご参照下さい。

目次

１．prop メソッド
２．prop で属性を変更
３．attr と prop との違い

１．prop メソッド

　
prop メソッドは、引数によって 4 通りの記述方法があります。

$(セレクタ).prop( name );

$(セレクタ).prop( name, value );

$(セレクタ).prop( map );

$(セレクタ).prop( name, function(index, prop) );

prop メソッドの引数の内容は、それぞれ以下の通りです。

.prop( name )

name
属性の名前を指定

.prop( name, value )

name
属性の名前を指定
value
設定する値を指定

.prop( map )

map
属性の名前と値との Map 値を指定 （まとめて要素の属性を設定することが可能となる）

.prop( name, function(index, prop) )

name
属性の名前を指定
function(index, prop)
新しい属性値を戻り値として返す関数を指定 　index：要素の index 　prop：変更前の属性値

▲目次へ戻る

　

２．prop で属性を変更

　
prop メソッドを使用して、ラジオボタンの属性（ checked ）を変更します。
各ボタンをクリックしてみて下さい。

　
上のサンプルのソースコードは次の通りです。

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
<!--
$(function() {
  $("#btn1").on("click", function() {
    $("#ch_yes").prop("checked", true);
  });
  $("#btn2").click(function() {
    $("#ch_no").prop("checked", true);
  });
});
//-->
</script>

<div style="background-color : #CCC; padding : 20px;">
  <table>
  <tr><td>
  <input type="button" id="btn1" value="YESにチェック">
  </td><td>
  <input type="button" id="btn2" value="NOにチェック">
  </td></tr>
  <tr><td>
  <input type="radio" name="rep" id="ch_yes">ＹＥＳ
  </td><td>
  <input type="radio" name="rep" id="ch_no">ＮＯ
  </td></tr>
  </table>
</div>

　
上のサンプルでは、「 .prop( name, value ) 」の形で次のように記述し、属性変更を行っています。

$("#ch_yes").prop("checked", true);

　
また、上のサンプルは name に同じ値を設定したラジオボタンのため　value 値 に「 true 」を設定した要素以外は自動的にチェックが外れますが、次のように記述して value 値 に「 false 」を設定すると、意図的にチェックを外すことができます。

$("#ch_yes").prop("checked", false);

▲目次へ戻る

　

３．attr と prop との違い

　
attr メソッドと prop メソッドとは、共に 要素の属性に対して 値を操作できるメソッドであり、記述方法も同じですが、checked など 指定されていれるか否かを true 又は false で表すことができる属性（ 真偽値属性 ）の属性値を取得する際に、その戻り値に違いがあります。

属性	メソッド	戻り値
checked	prop	true ／ false
	attr	“checked” ／ “”
selected	prop	true ／ false
	attr	“selected” ／ “”
disabled	prop	true ／ false
	attr	“disabled” ／ “”
multiple	prop	true ／ false
	attr	“multiple” ／ “undefined”

上記の通り、真偽値属性の属性値を取得する際に、prop メソッドは真偽値（ true 又は false ）で取得できますが、attr メソッドは文字列で取得します。

if 文の条件式の中で戻り値を使用する場面等を考えると、戻り値は文字列より真偽値で取得した方が 後続処理の正確性が保たれます。

ですので、真偽値属性に関する操作を行う場合は、prop メソッドを使用するようにしましょう。

▲目次へ戻る