在 iOS Safari 上，使用单选按钮切换 dom 中断 radios/checkboxes

Question

以下代码在 iOS 上的 Safari 以外的所有浏览器上都能正常工作（尚未测试 android）。

足够简单的概念。当用户单击单选选项时，我切换 class 以更改显示的附加字段。第一次可以，但是在我更改一次之后，所有的单选按钮和复选框都无法点击。

代码如下所示..
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');
  }
});

我尝试过使用其他方法绑定事件，例如 .on('click', function() {});、.change() 等。我在 iOS Safari 上仍然得到相同的结果。

Answer 1

在 https://jsfiddle.net/pc5n3tg0 工作。在 iOS 8.1 上测试并注意 jQuery 2.1.3 的使用。可能值得编辑问题以反映版本，可能需要更多调查。
解决方案使用 on('click') 并设置隐藏。假设 css 是

.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');
    }
});`

在 iOS Safari 上，使用单选按钮切换 dom 中断 radios/checkboxes

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

safari

jquery

radio-button

ios