habilitar para página con varios formularios

0 votos
preguntado por RAM47 (140 puntos) Ago 11, 2016 en Javascript
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>

Por favor, accede o regístrate para responder a esta pregunta.

Preguntas relacionadas

Bienvenido a Dudas de Programación, donde puedes hacer preguntas y recibir respuestas sobre los problemas más frecuentes de los lenguajes de programación, frameworks de desarrollo y bases de datos que utilices. Foro de Línea de Código
...