Hola. Tengo una página con tres formularios y todos los elementos deshabilitados. Sobre los formularios hay tres input radio. Necesito habilitar cada formulario a través de cada input. Adjunto el código. Muchas gracias.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>cervezas</title>
<style>
.principal {
height: 50px;
padding-top: 2%;
}
.principal input[type=radio] {
width: 12%;
border: 1px solid #999999;
}
.encabezado {
display: inline-flex;
margin-left: 5.5%;
margin-right: 5.5%;
}
.encabezado-texto {
font: 14px/16px "Helvetica Neue",Arial, Helvetica, sans-serif;
font-weight: 600;
}
.m {
width: 25%;
}
.h {
margin: auto;
width: 25%;
}
.c {
width: 25%;
}
.formulario {
margin-left: 5.5%;
margin-right: 5.5%;
display: inline-flex;
}
.formulario.mahou {
width: 25%;
}
.formulario.heineken {
margin: auto;
width: 25%;
}
.formulario.carlsberg {
width: 25%;
}
.datos label {
opacity: 0.5;
}
input[type=text] {
width: 100%;
}
select {
width: 100%;
}
textarea {
width: 98%;
}
input[type=submit] {
display: block;
margin: auto;
}
input[type="text"]:disabled {
background: #E5E5E5;
}
textarea:disabled {
background: #E5E5E5;
}
select:disabled {
width: 100%;
color: #BBBBBB;
background-color: #E5E5E5;
}
input[type=submit]:disabled {
background-color: #E5E5E5;
color: #BBBBBB;
margin: auto;
}
</style>
</head>
<body>
<div class="principal">
<div class="encabezado m"><input type="radio" name="mahou" value="mahou">
<div class="encabezado-texto">MAHOU</div></div>
<div class="encabezado h"><input type="radio" name="heineken" value="heineken">
<div class="encabezado-texto">HEINEKEN</div></div>
<div class="encabezado c"><input type="radio" name="carlsberg" value="carlsberg" onclick="hrv()">
<div class="encabezado-texto">CARLSBERG</div></div>
</div>
<div class="formulario mahou">
<form name="mahou" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana?:</label>
<select name="vasos-mahou" disabled>
<option value="m1">menos de 10</option>
<option value="m2">menos de 20</option>
<option value="m3">menos de 30</option>
<option value="m4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
<div class="formulario heineken">
<form name="heineken" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana:</label>
<select name="vasos-heineken" disabled>
<option value="h1">menos de 10</option>
<option value="h2">menos de 20</option>
<option value="h3">menos de 30</option>
<option value="h4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
<div class="formulario carlsberg">
<form name="carlsberg" method="post" action="">
<div class ="datos">
<label for="nombre">Nombre:</label>
<input type="text" name="nombre" disabled>
<label for="email">Email:</label>
<input type="text" name="email" disabled>
<label for="telefono">Teléfono:</label>
<input type="text" name="telefono" disabled>
</div>
<div class="datos">
<label for="vasos">Cuantos vasos tomas a la semana:</label>
<select name="vasos-carlsberg" disabled>
<option value="c1">menos de 10</option>
<option value="c2">menos de 20</option>
<option value="c3">menos de 30</option>
<option value="c4">menos de 40</option>
</select>
</div>
<div class="datos">
<label for="marca">Cómo te enteraste de la marca?</label>
<textarea name="marca" disabled></textarea>
</div>
<div class="datos">
<input type="submit" value="enviar" disabled>
</div>
</form>
</div>
</body>
</html>