4

¿Cómo puedo habilitar un botón al dar click en cualquiera de los radio button de un mismo name. Aclaro que el número de radio button puede variar indefinidamente pero todos tienen el mismo name.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.done demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
</head>
<body>
  <lavel class="theradius">
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    
    
  </lavel>
<button id="run" style="display:none">GO</button>
 
</body>
</html>

6 respuestas 6

6

Te comparto un código para mostrar el botón cuando selecciones algún radio button.

var opciones = document.getElementsByName('Nic');
for( var i=0,il = opciones.length; i< il; i ++ ){
 opciones[i].onclick = clickHandler;
}

function clickHandler(){
  var button = document.getElementById('run')
  button.style.display = 'block';
}
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.done demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
</head>
<body>
  <lavel class="theradius">
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    
    
  </lavel>
<button id="run" style="display:none">GO</button>
 
</body>
</html>

0

Aunque no es muy clara la pregunta, me baso en lo que comentas: Que al dar click (cambiar) cualquiera de los radios se "active el Botón":

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.done demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
</head>
<body>
  <lavel class="theradius">
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    
    
  </lavel>
<button id="run" style="display:none">GO</button>
 <script>

$(function(){
$('input[type=radio][name=Nic]').change(function() {
$("#run").show();

});

});
</script>
</body>
</html>

0

Y si en vez de radio utiliza mejor un input tipo checkbox

La mayor diferencia es que el radio button te permite solamente elegir una solo vector u opción de la lista que te sale en el cuadro de dialogo, mientras que el checkbox te permite seleccionar varios y en algunos casos permite al usuario que pueda introducir un valor que el radio button no permite.

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.done demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
</head>
<body>
  <lavel class="theradius">
    <input name="Nic" type="checkbox"/>
    <label># 1 Nic</label>
    <br/>
    <input name="Nic" type="checkbox"/>
    <label># 2 Nic</label>
    <br/>
    <input name="Nic" type="checkbox"/>
    <label># 3 Nic</label>
    <br/>
    <input name="Nic" type="checkbox"/>
    <label># 4 Nic</label>
    <br/>
    <input name="Nic" type="checkbox"/>
    <label># 5 Nic</label>
    
    
  </lavel>
<button id="run" style="display:none">GO</button>
 
</body>
</html>

¡Espero sea de ayuda y sea lo que estás buscando, ya que la pregunta no es muy clara!

1
  • 1
    Si la pregunta no es clara, deberías pedir aclaración en la zona de comentarios... Desde mi punto de vista, tu respuesta no parece ser lo que busca el OP: 1- No estás habilitando el botón. 2- Que pasa si se necesita redireccionar a otra pagina de acuerdo a la opción seleccionada?. 3- Que pasa si quiere enviar la opción seleccionada a una base de datos?...
    – DjCrazy
    Commented el 19 dic. 2019 a las 15:22
0

Yo e usado Jquery para cambiar el css del elemento y en vez de usar display e usado 'visibility' que viene a hacer lo que tu quieres.

Es necesario que importes la librería de jquery para que te funcione.

Si quieres ocultar el botón de nuevo tan solo tienes que cambiar de visible a hidden y listo.

$(document).ready(function(){
  $('.accion').click(function(){
    $('#run').css('visibility','visible');
  });
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>deferred.done demo</title>
  <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
  
</head>
<body>
  <lavel class="theradius">
    <input class="accion" name="Nic" type="radio"/>
    <br/>
    <input class="accion" name="Nic" type="radio"/>
    <br/>
    <input class="accion" name="Nic" type="radio"/>
    <br/>
    <input class="accion" name="Nic" type="radio"/>
    <br/>
    <input class="accion" name="Nic" type="radio"/>
    
    
  </lavel>
<button id="run" style="visibility:hidden">GO</button>
 
</body>
</html>

5
  • No es necesario importar jQuery.
    – jolsalazar
    Commented el 19 dic. 2019 a las 14:12
  • sino recuerdo mal sino se importa la libreria .min te dara el error de que no reconoce el caracter '$' de la línea 1 Commented el 19 dic. 2019 a las 15:06
  • 1
    Me refiero a que no es necesario importar JQuery ya que la solucion se puede realizar sin necesidad de la libreria. Claramente si no se usa la libreria, no usaras $.
    – jolsalazar
    Commented el 19 dic. 2019 a las 15:08
  • sisisi en eso tienes razón, esto se puede hacer de varias formas, eso no te lo discuto Commented el 19 dic. 2019 a las 15:15
  • 1
    Sólo lo comente por que el usuario no indico jquery, era solo una observacion
    – jolsalazar
    Commented el 19 dic. 2019 a las 15:18
0

Bueno tambien podrias hacerlo con un disabled para deshabilitar o habilitar el boton utilizando attr, de la siguiente forma:

    <!doctype html>
    <html lang="en">
    <head>
      <meta charset="utf-8">
      <title>deferred.done demo</title>
      <script src="https://code.jquery.com/jquery-1.10.2.js"></script>
      
    </head>
    <body>
      <lavel class="theradius">
        <input name="Nic" type="radio"/>
        <br/>
        <input name="Nic" type="radio"/>
        <br/>
        <input name="Nic" type="radio"/>
        <br/>
        <input name="Nic" type="radio"/>
        <br/>
        <input name="Nic" type="radio"/>
      </lavel>
    <button id="run" disabled>GO</button>
     
     <script>
        $('input[type="radio"]').on('click', function(){
            $('#run').attr("disabled", false);
        });
    </script>
     
    </body>
    </html>

Espero te sirva. Saludos ;)

0

Al button dale el mismo nombre del grupo de radio buttons al que pertenece:

  <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
    <br/>
    <input name="Nic" type="radio"/>
  </lavel>
    <button  name="Nic"  id="run" disabled>GO</button>



  <script>

           $(function(){


                   $("body").on('click", 'input[type="radio"]', function(){
                            var name = $(this).attr("name");

                           $('button [name='+ name + ']').attr("disabled", false);
                });


             });
         </script>

El evento click lo haces al body para que no ataches un evento a cada radio button.

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.