2015-06-18 1 views
0

Следующий код отлично работает во всех браузерах, кроме Safari на iOS (еще не прошел проверку Android).На iOS Safari, с помощью переключателя для переключения режимов перерывов радио/флажков

Простая концепция. Когда пользователь нажимает на параметр радио, я переключаю класс для изменения дополнительных полей. Работает в первый раз, но после того, как я меняю его один раз, все переключатели и флажки становятся незаметными.

Вот что код выглядит как ..
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.

ответ

1

Работает на https://jsfiddle.net/pc5n3tg0. Протестировано на iOS 8.1 и обратите внимание на использование jQuery 2.1.3. Может стоить изменить вопрос, чтобы отразить версии, может потребоваться больше расследований.
Решение использует on('click') и устанавливает скрыть. Предположив КСС

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

Да работает JQuery 2.1.3, ваш CSS правильно. Возможно, мой код внутри формы имеет какое-то отношение к нему. Попробуй это на своей скрипке. – BrandonReid

Смежные вопросы