> Faqs > Habilitar o inhabilitar un campo input text al cambiar la opción de un campo input radio

Habilitar o inhabilitar un campo input text al cambiar la opción de un campo input radio

Necesito saber como inhabilitar un input tipo de texto, de acuerdo a un input radio.

El Input radio tiene dos opciones si / no.

  • El Input type text tiene que estar habilitado cuando el input radio tenga la opción seleccionada como "si".
  • El input text tendría que estar deshabilitado en el caso que la opción seleccionada en el input radio sea "no".

Gracias de antemano

Responder la pregunta
Editar Hacer otra preguntaPreguntar

Respuestas

Esta práctica requiere un par de pasos:

  • Definir un evento para el click para el input radio "Si". Cuando se produzca el click se procederá a habilitar el input text.
  • Definir un evento para el click para el input radio "No". Cuando se produzca el click se procederá a deshabilitar el

El Input text en principio supongo que aparecerá habilitado.

El HTML no lo indicas y hubiera estado bien. Pero podría ser algo como este:

<form>
  <p>
    ¿Interesado en recibir email?
  </p>
  <p>
    <input type="radio" name="interesado" value="si" id="interesadoPositivo" checked> Sí
    <input type="radio" name="interesado" value="no" id="interesadoNegativo"> No
  </p>
  <p>
    <input type="text" name="email" placeholder="Escribe tu email" id="emailInput">
  </p>
</form>

Ahora, la parte del Javascript para habilitar o deshabilitar el input, según se va haciendo click en el radio del "Si" o el "No".

// Accedemos al botón
var emailInput = document.getElementById('emailInput');

// evento para el input radio del "si"
document.getElementById('interesadoPositivo').addEventListener('click', function(e) {
  console.log('Vamos a habilitar el input text');
  emailInput.disabled = false;
});

// evento para el input radio del "no"
document.getElementById('interesadoNegativo').addEventListener('click', function(e) {
  console.log('Vamos a deshabilitar el input text');
  emailInput.disabled = true;
});

Espero que te haya quedado claro.

Norberto
50 1 4 3

hola gracias por tu respuesta pero todavía no me sirve este es el código y son 3 input que cambiarían de acuerdo a la selección

var nombre_pp = document.getElementById('nombre_pp');

// evento para el input radio del "si" document.getElementById('planPositivo').addEventListener('click', function(e) { console.log('Vamos a habilitar el input text'); nombre_pp.disabled = false; });

// evento para el input radio del "no" document.getElementById('planNegativo').addEventListener('click', function(e) { console.log('Vamos a deshabilitar el input text'); nombre_pp.disabled = true; }); y este seria el html cabe anotar que todo esta dentro de un form

<div class="col-xs-6"> <label class="control-label">UA-UG(plan parcial):</label> si<input type="radio" value="si" name="plan" id="planPositivo" checked>no<input type="radio" name="plan" value="no" id="planNegativo"> </div> <div class="col-xs-6"> <label class="control-label">nombre del plan parcial:</label> <input maxlength="30" type="text" class="form-control" name="nombre_pp" id="nombre_pp"> </div> <div class="col-xs-6"> <label class="control-label">decreto del plan parcial:</label> <input maxlength="30" type="text" required="required" class="form-control" name="decreto_pp"> </div> <div class="col-xs-6"> <label class="control-label">unidad de actuacion del plan parcial</label> <input maxlength="20" type="text" required="required" class="form-control" name="unidad_pp"> </div> si me puedes ayudar te lo agradecería soy nuevo en esto de javascript gracias de antemano
alvaro
2 1
El código lo tienes que formatear con el icono correspondiente en el editor, seleccionando las partes que son código y pulsando el icono. Si tienes que responder al que te contestó usa los comentarios y si tienes que agregar datos, edita tu pregunta. No se debería crear una respuesta para preguntar de nuevo.