jQueryMobileを使ったチェックボックスの値をJavaScriptで操作するときの覚え書き

Mobile Safari上でjQueryMobileを使って

<fieldset data-role="controlgroup">
  <input type="checkbox" id="chk1" name="chk1" value="" class="custom" />
  <label for="chk1">checkbox1</label>
  <input type="checkbox" id="chk2" name="chk2" value="" class="custom" />
  <label for="chk2">checkbox2</label>
</fieldset>

のようなhtmlがあるとき、片方のチェックボックスがチェックされたら、もう片方のチェックボックスを未チェック状態にしたいとします。
普通だと、

$("input:checkbox").change(function() {
    var radio_name = $(this).attr('name');
    //どっちかにチェック入れると，どっちかのチェックを外す
    if( radio_name === "chk1" ) {
        $('#chk2').attr('checked', false);
    } else if ( radio_name == "chk2" ) {
        $('#chk1').attr('checked', false);
    }
});

のようなコードでOKなのですが、jQueryMobileの場合、タッチパネルに最適化するために、input要素の上にlabel要素を重ねた状態にしています。
そのため、上記のようなコードでは、チェックボックスのchecked属性の値は変わっても、見た目が変わりません。
よくよくマニュアル( http://jquerymobile.com/demos/1.0a4.1/#docs/forms/forms-checkboxes.html )を読むと以下のようにrefreshメソッドを呼んであげないといけないことが分かりました。

$("input:checkbox").change(function() {
    var radio_name = $(this).attr('name');
    //どっちかにチェック入れると，どっちかのチェックを外す
    if( radio_name === "calendar_check" ) {
        $('#chk2').attr('checked', false).checkboxradio('refresh');
    } else if ( radio_name == "map_check" ) {
        $('#chk1').attr('checked', false).checkboxradio('refresh');
    }
});

jQueryMobileのrefreshメソッドを眺めてみると、

refresh: function( ){
		var input = this.element,
			label = this.label,
			icon = label.find( ".ui-icon" );

		if ( input[0].checked ) {
			label.addClass( $.mobile.activeBtnClass );
			icon.addClass( this.checkedicon ).removeClass( this.uncheckedicon );

		} else {
			label.removeClass( $.mobile.activeBtnClass );
			icon.removeClass( this.checkedicon ).addClass( this.uncheckedicon );
		}

		if( input.is( ":disabled" ) ){
			this.disable();
		}
		else {
			this.enable();
		}
	}

のような感じになっていて、label要素やicon含みでスタイルの変更を行っていました。
なるほど〜。