jQuery「prop」プロパティを取得・設定する

条件にマッチしたDOM要素について、指定したプロパティの値を返します。ただし、複数のプロパティがマッチした場合は、そのうちの「最初の」プロパティだけが対象になります。マッチするすべての要素を対象にしたい場合は、.each()メソッドによるループを使います。jQuery1.6以前では、プロパティとアトリビュートの扱いが明確に区別されておらず混乱を招くことがありましたが、1.6以降は明確に区別されるようになりました。しかし、.attr()の挙動が変化したことでjQueryを利用している既存のコードが予期しない動作になる事態が多々発生してしまい、JQuery1.6.1では過度的な対応として.attr()でも従来どおりプロパティが扱えるようにする修正が行われました。

AttributeとProperty
.attr()と.prop()、つまりAttribute（アトリビュート）とProperty（プロパティ）は区別が難しい概念ですが、Attributeが「HTMLに記述された値、すなわち初期値」であるのに対してPropertyはHTMLをDOMとして解釈した「個々のノードが持つ値」だと考えられます。例えば

利用規約<input type=”checkbox” class=”form-input” name=”agree” value=”yes” checked=”checked”>同意する<br>

という要素の「checked」のアトリビュートは、のちにJavaScriptから書き換えられてもずっと「”checked”」のままです。AttributeはHTMLに記述されたアトリビュート値なので変化しません。一方、「checked」プロパティの値は、チェックされているときは「true」、チェックを外したときは「false」と変化します。どちらを使うのが適切か悩むときは、「HTMLに書かれているものはアトリビュート、そうでないものはプロパティ」と考えるとよいです。

書式

.prop(プロパティ名);
.prop(プロパティ名、値);
.prop(オブジェクト);
.prop(function() {処理… });

var checked = $('input[type=checkbox]').prop('checked');
$('#agreement').prop('checked', true);
obj = new Object();
obj.disabled = false;
obj.checked = true;
$('input').prop(obj);
$('form input:text').prop('name', function(){
    return $(this).prop('id');
});

サンプル

１、プロパティ値を取得する

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          利用規約<input type="checkbox" class="form-input" name="agree" value="yes" checked="checked">同意する<br>
          <input class="button" type="button" name="submit" value="プロパティ値を確認">
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('.button').on('click',function(){
          alert($('input[name="agree"]').prop('checked'));
        });
      });
    </script>
</body>

実行結果 — チェックを外した状態で、「プロパティ値を確認」ボタンをクリックした後

２、プロパティ値を設定する

<body>
  <style>
    .sticky {
      background: #aaa;
    }
  </style>
    <div class="main">
      <div class="header">
        <h1>サンプル</h1>
      </div>
      <div class="content">
        <form>
          利用規約<input type="checkbox" class="form-input" name="agree" value="yes" checked="checked">同意する<br>
          <input class="button" type="button" name="submit" value="プロパティ値を確認">
        </form>
        <div class="desc"></div>
      </div>
      <div class="footer">
        <hr>
        <p class="copyright">2024 xxx all rights reserved.</p>
      </div>
    </div>
    <script>
      $(document).ready(function(){
        $('.button').on('click',function(){
          if($('input[name="agree"]').prop('checked') == true){
            $('input[name="agree"]').prop('checked',false);
          }else{
            $('input[name="agree"]').prop('checked',true);
          }
        });
      });
    </script>
</body>

カテゴリー:DOM操作JavaScriptjQuery