CODEWITHSUNDEEP
jqueryiossafariradio-button
BrandonReid
BrandonReid

Reputation: 1314

On iOS Safari, using radio button to toggle dom breaks radios/checkboxes

The following code works fine on all browsers except Safari on iOS (haven't tested android yet).

Simple enough concept. When the user clicks a radio option, I toggle a class to change which additional fields are shown. Works the first time, but after I change it once, all the radio buttons and checkboxes become unclickable.

Here's what the code looks like..
HTML:

<div class="form-group col-xs-12 checklist patientOrOther">
  <p>Will this CD be going to you (the patient) or to another facility/clinician?</p>
  <label for="patient"><input type="radio" name="toPatientOrOther" id="patient" value="patient" checked>To the Patient (myself)</label>
  <label for="other"><input type="radio" name="toPatientOrOther" id="other" value="other">To Another Facility/Clinician</label>
</div>
<div class="toPatient">
  <p>Info needed when going to patient</p>
</div>
<div class="toOther hide">
  <p>Info needed when going to another facility/clinician</p>
</div>

jQuery:

$('#patient').bind('change', function() {
  if ($(this).is(':checked')) {
    $('.toOther').addClass('hide');
    $('.toPatient').removeClass('hide');
  }
});
$('#other').bind('change', function() {
  if ($(this).is(':checked')) {
    $('.toPatient').addClass('hide');
    $('.toOther').removeClass('hide');
  }
});

I've tried using other methods of binding the event, such as .on('click', function() {});, .change(), etc. I still get the same result on iOS Safari.

Upvotes: 0

Views: 1034

Answers (1)

bowcot84
bowcot84

Reputation: 36

Working at https://jsfiddle.net/pc5n3tg0. Tested on iOS 8.1 and note use of jQuery 2.1.3. May be worth editing question to reflect versions, may require more investigation.
Solution uses on('click') and sets hide. Presuming css is 

.hide {
    display:none;
}

JS

$('#patient').on('click', function () {
    if ($(this).is(':checked')) {
        $('.toOther').addClass('hide');
        $('.toPatient').removeClass('hide');
    }
});
$('#other').on('click', function () {
    if ($(this).is(':checked')) {
        $('.toPatient').addClass('hide');
        $('.toOther').removeClass('hide');
    }
});`

Upvotes: 1

Related Questions