Not long ago, I posed a query on Stackoverflow regarding the customization of horizontal jQuery-mobile radio buttons. You can find the original post by following this link How to customize horizontal jQuery-mobile radio buttons. A developer promptly responded with a comprehensive JSFiddle example. Following their guidance, I successfully implemented the custom JQuery Mobile radio button, which functions perfectly on desktop browsers.
However, upon testing on real devices such as Galaxy S2, iPhone 5, Mac simulators, and Android simulators, it became apparent that the functionality did not mimic that of desktop browsers. While uncertain about the exact issue, I acknowledge that there may be a minor adjustment required to ensure compatibility with real devices. My proficiency in JS is limited, so I kindly seek assistance in resolving this matter expeditiously.
You can view the previous JSFiddle example created by Gajotres http://jsfiddle.net/Gajotres/779Kn/
$(document).on('pagebeforeshow', '#index', function(){
$('<div>').addClass('checkBox').appendTo('fieldset div div.ui-radio label');
$('input[type="radio"]').each(function(){
($(this).is(':checked')) ? $(this).next().find(".checkBox").addClass('checked') : $(this).next().find(".checkBox").addClass('not-checked');
});
$(document).on('click', '.ui-radio', function(){
$('input[type="radio"]').each(function(){
$(this).next().find(".checkBox").addClass('not-checked').removeClass('checked');
});
if($(this).find('input[type="radio"]').is(':checked')){
$(this).find('label div.checkBox').removeClass('checked').addClass('not-checked');
$(this).find('input[type="radio"]').attr('checked' , false);
} else {
$(this).find('label div.checkBox').removeClass('not-checked').addClass('checked');
$(this).find('input[type="radio"]').attr('checked' , true);
}
});
});
.checkBox{
width: 18px;
height: 18px;
background: #d9d9d9;
border-radius: 3px;
margin: 0 auto;
margin-bottom: 5px;
}
.not-checked, .checked {
background-image: url("http://www.fajrunt.org/icons-18-white.png");
background-repeat: no-repeat;
}
.not-checked {
background-position: -18px 0;
background-color:#d9d9d9;
}
.checked {
background-position: -720px 0;
background-color:#6294bc;
}
I have also provided a separate link for your convenience to quickly test on different devices.
*Stackoverflow FYI: I attempted to continue from the previous thread, but as the developer responsible was unable to address or resolve the last issue, I initiated a new discussion.