JQuery mobile customize horizontal radio buttons are not working in Actual Devices

Question

Recently I asked a question on Stackoverflow that How to customize horizontal jQuery-mobile radio buttons you can also view the post from this link How to customize horizontal jQuery-mobile radio buttons . A developer very cursorily answered the question with very good JSFiddle example. According to his instruction I implemented the custom JQuery Mobile radio button and it's all working fine in desktop browsers.

However when I checked on actual devices (Galaxy S 2, IPhone 5, Mac simulators and Android simulators) and it's not working as like desktop browsers acts. I'm not sure what's wrong here but I can understand there is a small tweak I need to do to support for actual devices. I'm not good at JS therefore, could anyone please look into this ASAP.

Here is the Previous JSFiddle example done 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 created a separate link hope this will help you to quickly check on devices. http://www.apartmentslanka.com/ztest_calender/radio.html

*Stackoverflow FYI: I tried to continue from previous post but since the responsible developer unable to answer or check the last issue I created a new post.

Gajotres · Answer 1 · 2013-04-02T10:13:05.050

You really need to be patient, I was on holiday :)

Here's a working example: http://jsfiddle.net/Gajotres/779Kn/20/

And this version should work on touch devices and desktop browsers alike: http://jsfiddle.net/Gajotres/779Kn/21/

Click event was changed to touchstart event, and now it also works on mobile devices.

$(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('touchstart', '.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);
        }        
    });   
});

Thank you! Thank you! Thank you! Thank you! really appriceate your help mac and really sorry to bother you. This update won't work now in desktop browser right ? Is that meant to like that or can we define a both desktop and Mobile supported event ? — FR STAR, Apr 02 '13 at 10:03
This version should work on touch devices and desktop browsers: http://jsfiddle.net/Gajotres/779Kn/21/ — Gajotres, Apr 02 '13 at 10:13
Thank you for this and during your reply I tried this event `$(document).on('touchstart click', '.ui-radio', function(e)` and it's working fine in both touch devices and desktop browser. — FR STAR, Apr 02 '13 at 10:26

score 1 · Answer 2 · answered Aug 27 '14 at 04:49

Just one additional comment (in case someone happens upon this question in the future) - the newer versions of JQueryMobile provide the "vclick" event which is the same thing as looking for "touch start" on mobile devices, and "click" on desktop browsers.

JQuery mobile customize horizontal radio buttons are not working in Actual Devices

2 Answers2