jQuery on('change') logic behaving wierdly in ios 8.2/8.3

Question

I am facing a weird behavior of jQuery logic in mobile-safari (in ios 8.2/8.3 and 4.1), which works fine in chrome, mozilla and ie.

My Requirement: I have a list checkboxes, from which I can choose only one at a time like a radio button(its my requirement). There are four buttons(CREATE,VIEW,EDIT,DELETE) corresponding to every checkbox provided.

When any of the checkbox is checked,I am disabling CREATE-button and enabling VIEW,EDIT,DELETE buttons and

If any of the checkbox is unchecked I am enabling CREATE-button and disabling VIEW/EDIT/DELETE buttons, for which I have written code below:

CREATE-button class name: 'disable-on-check'

VIEW/EDIT/DELETE buttons class name: 'enable-on-check'

$(':checkbox').on('change',function(){ 
var curr = $(this);                  
if(curr.is(':checked')){            
    $(".enable-on-check").addClass("click-enabled").removeClass("click-disabled");
    $(".disable-on-check").removeClass("click-enabled").addClass("click-disabled");                               
    $('.chkbx').prop("checked",false); //to make checkbox to behave like a radio button
    $(this).prop("checked",true);  //to make checkbox to behave like a radio button                             
}
else{
    $(".enable-on-check").removeClass("click-enabled").addClass("click-disabled");
    $(".disable-on-check").removeClass("click-disabled").addClass("click-enabled");
} });

My Problem: In mobile-safari (ios 8.2/8.3 and 4.1 as well) when I check any of the checkboxes(more than twice or thrice), CREATE-button is getting highlighted instead of VIEW/EDIT /DELETE buttons and

If I uncheck any of the checkboxes VIEW/EDIT/DELETE buttons are getting enabled instead of CREATE-button -- which is exactly inverse behaviour of my logic.

Please help me, why I am getting this problem only in mobile-safari ?? THANKS IN ADVANCE

Answer 1

After lot of trails, changing the event type helped me in fixing the issue.

What I observed in my experience is .on('change') is invoking my logic twice at some instance(don't know why). So I tried with .on('keydown click') and now everything is working fine :)

Finally the answer is:

$(':checkbox').on('keydown click',function(){ 
var curr = $(this);                  
if(curr.is(':checked')){            
    $(".enable-on-check").addClass("click-enabled").removeClass("click-disabled");
    $(".disable-on-check").removeClass("click-enabled").addClass("click-disabled");                               
    $('.chkbx').prop("checked",false); //to make checkbox to behave like a radio button
    $(this).prop("checked",true);  //to make checkbox to behave like a radio button                             
}
else{
    $(".enable-on-check").removeClass("click-enabled").addClass("click-disabled");
    $(".disable-on-check").removeClass("click-disabled").addClass("click-enabled");
} });