tengo un sitio web que muestra algunas preguntas a los usuarios, cada pregunta tiene 4 opciones en los botones de radio, mi código se ve a continuación:
$('div.question').hide().first().show(); $('a.display').on('click', function(e) { e.preventDefault(); var that = $('div.question:visible'), t = $(this).text(); if (t == 'next' && that.next('div.question').length > 0) { $('div.question').hide(); that.next('div.question').show() } }); <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="question bg-white p-3 border-bottom"> <div class="d-flex flex-row question-title"> <h3 class="text-danger">1. </h3> <h5 class="mt-1 ml-2">I try to be with people.</h5> </div> <div class="ans ml-2"> <div class="form-check"> <input class="form-check-input" name="q1" value="1" type="radio"> <input class="form-check-input" name="q1" type="radio" value="2"> <input class="form-check-input" name="q1" type="radio" value="3"> <input class="form-check-input" name="q1" type="radio" value="4"> </div> </div> </div> <a id="display" class="btn btn-info btn-sm display si">next</a>esto es lo que hice, pero el problema es que el usuario puede ir a la siguiente pregunta sin marcar el botón de opción, quiero restringir eso, el usuario debe marcar cualquiera de los botones de opción para pasar a la siguiente pregunta, ¿alguien puede decirme cómo lograr esto? , gracias de antemano
Oculté el "siguiente" con style="display:none; y agregué este código javascript al final:
<script type="text/javascript"> $('.form-check-input').click(function(){ $('#display').show(); }); </script>por lo que el "siguiente" se mostrará tan pronto como el usuario haga clic en uno de los botones de opción.
La versión completa dice
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <div class="question bg-white p-3 border-bottom"> <div class="d-flex flex-row question-title"> <h3 class="text-danger">1. </h3> <h5 class="mt-1 ml-2">I try to be with people.</h5> </div> <div class="ans ml-2"> <div class="form-check"> <input class="form-check-input" name="q1" value="1" type="radio"> <input class="form-check-input" name="q1" type="radio" value="2"> <input class="form-check-input" name="q1" type="radio" value="3"> <input class="form-check-input" name="q1" type="radio" value="4"> </div> </div> </div> <a id="display" class="btn btn-info btn-sm display si" style="display:none;">next</a> <script type="text/javascript"> $('.form-check-input').click(function(){ $('#display').show(); }); </script>Otra forma es agregar eventos en el html y ocultar el botón al principio.
<input class="form-check-input" name="q1" type="radio" value="1" onclick="handleClick(event);" /> <input class="form-check-input" name="q1" type="radio" value="2" onclick="handleClick(event);" /> <input class="form-check-input" name="q1" type="radio" value="3" onclick="handleClick(event);" /> <input class="form-check-input" name="q1" type="radio" value="4" onclick="handleClick(event);" />js.
$("#display").hide(); function handleClick(e) { //console.log(e.target.value); $("#display").show(); }