jQuery Mobileを用いてWebアプリケーションを作成しているのですが、検索条件を選択するフォームが長いので、Multi-page template structure（1つのHTMLで複数のページを構成する）を採用して、検索条件の項目毎にページを分割することにしました。
その際、各ページの項目は選択必須としたいので、チェックボックスやラジオボタンがチェックされていることを確認して次のページを表示するようにしたいと考え、プログラムを検討してみました。結果、次ページへの遷移ボタンをクリックした際に次のようなプログラムが動作するようにしました。
$(function () {
$(".js-check-required").on("click", function (e) {
var $content = $(e.target).parents(".ui-content");
if ($content.find(":checked").length < 1) {
alert("条件を少なくとも一つ選択して下さい");
return false;
}
});
});
jQueryの:checked Selectorに解説がありますが、:checkedはチェックボックス・ラジオボタン・セレクトボックスのいずれでも動作するので、必須選択チェックとして汎用的に利用可能です。
alertが無骨な印象ですが、jQuery Mobile Dialog WidgetはDeprecatedになっているので、ひとまずそのままにしています。