用意したチェックボックスの全てがOFFなら、submitボタンをdisabled(トーンダウン)にしたいと思い、$(‘#checkboxId’).attr(‘checked’)でON/OFF状態を取得したが、OFFの時undefinedになり、どう判定していいかわからなかった。true/falseで状態を取得したく、jQueryのAPIドキュメントを見ると、.propを使えばいいというのがわかった。
確認ページ：hello_jQuery_mobile_form_checkboxstatus.html
JavaScript
$(document).delegate("#home", "pageinit", function() {
$('input[type="checkbox"]').bind('change', function() {
console.log('checkbox status changed');
confirmCheckbox();
});
});
// チェックボックスの状態確認
// ：両方OFFで取得ボタンをトーンダウンする
function confirmCheckbox() {
var checkbox01Status = $('#checkbox01').prop('checked');
var checkbox02Status = $('#checkbox02').prop('checked');
var checkbox03Status = $('#checkbox03').prop('checked');
if ((checkbox01Status === false) && (checkbox02Status === false) && (checkbox03Status === false)) {
$('#btnGet').button("disable");
}
else {
$('#btnGet').button("enable");
}
$('#btnGet').button('refresh');
}
HTML
<div data-role="page" id="home"> <div data-role="header"> <h1>チェックボックスのON/OFF状態</h1> </div> <div data-role="content" align="center"> <div id="option" data-role="fieldcontain"> <!-- フォーム --> <!-- チェックボックス --> <fieldset data-role="controlgroup"> <legend>Checkbox</legend> <input type="checkbox" name="checkbox01" id="checkbox01" class="custom" /> <label for="checkbox01">checkbox01</label> <input type="checkbox" name="checkbox02" id="checkbox02" class="custom" /> <label for="checkbox02">checkbox02</label> <input type="checkbox" name="checkbox03" id="checkbox03" class="custom" /> <label for="checkbox03">checkbox03</label> </fieldset> <!-- ボタン --> <input type="button" id="btnGet" value="取得" disabled="true" data-inline="true" data-shadow="false" data-theme="b"> </div> </div> <div data-role="footer"> <h4>Copyright 2012</h4> </div> </div>
参考サイト
関連エントリー
