> 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

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
238 6 20 15

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;
});

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.