概要

以下の様なチェックボックスがあります。

<div class="checkbox">
  <label>
    <input type="checkbox" class="sayaka">
    青い髪の女の子
  </label>
</div>

そしてこの input 要素の change イベントに以下のようにイベントハンドラを登録します。

$('.sayaka').on('change', function () {
    if ($(this).prop('checked')) {
        alert('可愛い女の子かと思った？ 残念！ さやかちゃんでした！');
    } else {
        alert('あたしって、ほんとバカ');
    }
});

すると、チェックボックスをクリックしてチェックを入れたり外したりするときに、
アラートダイアログが表示されます。

しかし、以下のように jQuery の .prop() メソッドを使って同様のことを行っても、チェックボックスのトグルは行われますがアラートダイアログが表示されません。
どうやら chenge イベントが発火していないようですね。

var $sayaka = $('.sayaka'),
    isChecked = function () { return $sayaka.prop('checked'); };

$sayaka.prop('checked', !isChecked());

では .prop() を利用する場合に change イベントを発火させるにはどうすればいいのでしょうか。
調べてみたところ .change() メソッドを利用すると良さそうです。

$sayaka.prop('checked', !isChecked()).change();

これで手動でチェックを入れたり外したりした場合と同様に、アラートダイアログが表示される (登録したイベントハンドラが実行される) ようになりました。

backbone.stickit を使っていて気付きました

.prop('checked', true/false) でチェックボックスをトグルしても change イベントが発火しない

概要

参考