First of all, you shouldn't use .ready()
in jQuery Mobile. Secondly, when you check/uncheck a checkbox or radio button problematically, you need to re-style it using .checkboxradio("refresh")
.
To bind event, use pageinit
as it fires once per page, this will ensure you dont add multiple listeners to the same item.
Since all checkboxes has the same .fruits
, check if the checked one has hatefruit id. Accordingly, check/uncheck the rest of checkboxes.
$(document).on("pageinit", "#page1", function () {
$(".fruits").on("change", function () {
if ($(this).is(":checked") && this.id == "hatefruit") {
$('.fruits').prop('checked', false).checkboxradio("refresh");
$(this).prop('checked', true).checkboxradio("refresh");
} else {
$('#hatefruit').prop('checked', false).checkboxradio("refresh");
}
});
});