手段について

僕は今までチェックボックスとかを無効にしたり、
自動でチェック付けたりする際は
以下のようにjQueryのpropメソッドを使って
こんな感じにやってました。

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

で、あらためてjsの勉強をしていると
できることは知ってたんですが、
jQueryを使わなくても思ったより手軽に書けるようでした。

$("#checkbox")[0].checked = true;

全て生のjｓにすると
こんな感じですね。

document.getElementById("checkbox").checked = true;

checkedをdisabledとかにすると色々いじれますね。

見た目の違いを考察してみた

うーん…代入の方が直感的な気がするけど、
jQueryのセレクタを使おうとすると
若干の無理矢理感が否めない…。
長さは似たようなものですね、
2つ目が少し短い程度。

速度を比較してみた

ご用意しましたは以下のコード。

$(function() {
  // propメソッド10000回を計測
  console.time('prop');
  for(i=0; i< 10000; i++){
    $("#id").prop("checked", true);
  }
  console.timeEnd('prop')

  // 直接代入10000回を計測
  console.time('assignment');
  for(i=0; i< 10000; i++){
    document.getElementById("id").checked = true;
  }
  console.timeEnd('assignment')
});