Question

以下代码适用于除iOS上的Safari之外的所有浏览器（尚未测试Android）。

简单的概念。当用户单击单选按钮时，我切换一个类以更改显示的其他字段。第一次工作，但在我更改一次后，所有单选按钮和复选框都变得不可点击。

这是代码的样子。
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中断无线电/复选框

1 个答案: