Tengo un código de alerta de javascript que muestra una alerta si una casilla de verificación no está marcada si un usuario intenta hacer clic en el botón de confirmación y funciona bien en el escritorio pero en la vista/dispositivos móviles, no funciona y traté de agregar touchstart , touch , touchend el javascript al lado de hacer clic, pero nada parece funcionar cuando lo pruebo en mi móvil, mi código está a continuación si alguien puede ayudar, por favor.
$(document).ready(function() { $('#confirmcheckout').on('click touchend', function() { if ($('#terms-condition').prop('checked') == true) { } else { alert("To proceed you must accept the terms.") } }); })Gracias de antemano
Supongo que 'hacer clic en el extremo táctil' podría dispararse dos veces en el móvil.
Esto podría ayudar:
$(document).ready(function() { $('#confirmcheckout').on('click touchend', function(event) { event.stopPropagation(); event.preventDefault(); if ($('#terms-condition').prop('checked') == true) { } else { alert("To proceed you must accept the terms.") } }); })EDITAR: Otra posible solución:
$(document).ready(function() { $('#confirmcheckout').on('touchend click', function(event) { if(event.type == 'touchend') { $(this).off('click'); } if ($('#terms-condition').prop('checked') == true) { } else { alert("To proceed you must accept the terms.") } }); })(si el extremo táctil funciona, elimine el clic)
Creo que lo acabo de resolver con el siguiente código.
<input id="terms-condition" type="checkbox" onclick="validate()" name="terms_condition" value="1" required="required" class="custom-control-input" {!! set_checkbox('terms_condition', '1') !!}> <button class="checkout-btn btn btn-primary btn block btn-lg" onclick="validate()" data-attach-loading="disabled" data-checkout-control="confirm-checkout" data-request-form="#checkout-form" id="confirmcheckout">Confirm</button> function validate() { if (document.getElementById('terms-condition').checked) { alert("Thank you for agreeing to the terms"); } else { alert("To proceed, you must accept the terms."); } }Parece que funciona tanto en la vista móvil como en la de escritorio.