entre Desarrolladores

Question

Hola amigos tengo este select

 <select id="slc" style='width: 150px' >
                                         <option value="1"> Reporte 1 </option>
                                         <option value="2">Reporte 2 </option>
                                         <option value="3">Reporte 3 </option> 

       </select>

y a su vez tengo dos radio button

                                                 <tr>
                                                    <td width="18"></td>
                                                    <td>
                                                        <label class="radio">
                                                            <input type="radio" name="chooseFormat" id="chooseFormat" value="ppt" checked/>
                                                            Ppt
                                                        </label>
                                                    </td>
                                                    <td width="30"></td>
                                                    <td>
                                                        <label class="radio">
                                                            <input type="radio" name="chooseFormat" id="chooseFormat" value="excel"/>
                                                            Excel
                                                        </label>
                                                    </td>
                                                </tr>

quiero saber como hacerle para que si elige Reporte 1 se desactiven en automático los radio button
desde ya muchas gracias, y si lo logro antes de que alguien me ayude estaré escribiéndoles mi solución

Answer 1

1 Respuestas

rach · Answer 2 · 2015-05-06T15:00:40+0000

3votos

white Puntos75880

utilizando el evento onchange podrias llamar a una funcion que determine el valor del <select>

<select onchange="change_radio_states(this.value)">
    <option value="1"> Reporte 1</option>
    <option value="2"> Reporte 2</option>
    <option value="3"> Reporte 3</option>
</select>
<input type="radio" name="chooseFormat" id="ppt" value="ppt" checked/> PPT
<input type="radio" name="chooseFormat" id="excel" value="excel" checked/> Excel

<script type="text/javascript">
    function change_radio_states(value)
    {
        if(value === '1')
        {
            document.getElementById('ppt').disabled = true;
            document.getElementById('ppt').checked = false;

            document.getElementById('excel').disabled = true;
            document.getElementById('excel').checked = false;
        }
    }
</script>

http://jsfiddle.net/an7ec1xr/

respondido por white (75.880 puntos) May 6, 2015

seleccionada por rach May 7, 2015

0voto

carlossevi comentado May 6, 2015

Simplemente añadir que con tu código no se vuelven a habilitar los botones cuando se seleccionan las opciones 2 y 3. Hago una pequeña modificación a la función JS:

function change_radio_states(value)
{
    var deshabilitar = (value === '1');

    document.getElementById('ppt').disabled = deshabilitar;
    document.getElementById('ppt').checked = !deshabilitar;

    document.getElementById('excel').disabled = deshabilitar;
    document.getElementById('excel').checked = !deshabilitar;
}

Por otro lado, si la opción que viene marcada por defecto es la 1, también deberían venir los elementos deshabilitados por defecto.

comentado por carlossevi (63.580 puntos) May 6, 2015

0voto

white comentado May 6, 2015

Toda la razon @carlossevi, aunque mi intension principalmente era dar un ejemplo sobre el evento que tiene a disposicion, corrigo el codigo con algo mas dinámico en base a tu idea:

<select id="dropdown">
    <option value="1"> Reporte 1</option>
    <option value="2"> Reporte 2</option>
    <option value="3"> Reporte 3</option>
</select>
<input type="radio" name="chooseFormat" value="ppt" checked/> PPT
<input type="radio" name="chooseFormat" value="excel" checked/> Excel

var enable = false,
    dropdown = document.getElementById('dropdown'),
    radios = Array
                .prototype
                .slice
                .call(document.getElementsByName('chooseFormat'));

function change_radio_states(r)
{
    enable = ((r.target ? r.target.value : r) === '1');

    for(var x = 0; x < radios.length; x++)
    {
        radios[x].disabled = enable;
        radios[x].checked = !enable;
    }
}

dropdown.addEventListener('change', change_radio_states);
change_radio_states(dropdown.value);

comentado por white (75.880 puntos) May 6, 2015

editado por white May 6, 2015

0voto

rach comentado May 7, 2015

ok muchas gracias por contestar, estoy trabajando en lograr lo que necesito y me han ayudado bastante, pero sigo teniendo problemas porq por ejemplo en la opcion uno si se pueden tener los dos formatos pero cuando le pongo digamos opcion 3 solo me tiene que poner ppt, y no eh logrado hacerlo funcionar, seguiré viendo como resolverlo!!

comentado por rach (6.010 puntos) May 7, 2015

movido por white May 7, 2015

0voto

rach comentado May 7, 2015

lo estoy intentando asi

    function change_radio_states(value)
{
        if(value === '1')
    {
        document.getElementById('ppt').enable = true;
        document.getElementById('ppt').checked = false;

        document.getElementById('excel').disabled = false;
        document.getElementById('excel').checked = false;
    }

    if(value === '2')
    {
        document.getElementById('ppt').enable = true;
        document.getElementById('ppt').checked = true;

        document.getElementById('excel').disabled = true;
        document.getElementById('excel').checked = false;
    }

        if(value === '3')
    {
        document.getElementById('ppt').disabled = true;
        document.getElementById('ppt').checked = false;

        document.getElementById('excel').enabled = false;
        document.getElementById('excel').checked = true;
    }

        if(value === '4')
    {
        document.getElementById('ppt').disabled = true;
        document.getElementById('ppt').checked = false;

        document.getElementById('excel').enable = true;
        document.getElementById('excel').checked = true;
    }

        if(value === '5')
    {
        document.getElementById('ppt').enable = true;
        document.getElementById('ppt').checked = false;

        document.getElementById('excel').disabled = false;
        document.getElementById('excel').checked = false;
    }
}

pero a veces no me activa los dos en la ultima opcion (5)
ayuda!!

comentado por rach (6.010 puntos) May 7, 2015

editado por white May 7, 2015

0voto

white comentado May 7, 2015

a ver si entendi bien en la opcion 1 se deshabilitaran los dos, en la opcion 3 solo excel y en la 2 solo ppt?

PD: talvez esto es lo que buscas? http://jsfiddle.net/vhfm1efr/

comentado por white (75.880 puntos) May 7, 2015

editado por white May 7, 2015

0voto

rach comentado May 7, 2015

Wow esta genial, lo voy a checar y si algo asi es lo que necesito, tengo 5 opciones ahora
1.... excel y ppt
2... ppt
3.... excel
4.... excel
5... excel y ppt

lo voy a checar como me dices, muchas gracias por la ayuda!!

comentado por rach (6.010 puntos) May 7, 2015

0voto

rach comentado May 7, 2015

solo tengo problema para activar el 5, me los inhabilita :(

comentado por rach (6.010 puntos) May 7, 2015

0voto

white comentado May 7, 2015

en la opcion 5 necesitas que se marquen los dos? talvez lo que necesitas es un checkbox y no un radio entonces, de todos modos te dejo un código flexible donde solo tienes que agregar las opciones para cada valor del select

http://jsfiddle.net/vhfm1efr/1/

comentado por white (75.880 puntos) May 7, 2015

0voto

rach comentado May 7, 2015

tal vez me di a entender mal, es que con tu ejemplo esta bien porq en si solo pueden elegir un tipo de formato, el problema es que de la manera que tu me dijiste me inhabilita los dos formatos :S y en ese caso necesito que me deje elegir por lo menos uno, muchas gracias por tu ayuda! los dos formatos en el caso 1 y 5

comentado por rach (6.010 puntos) May 7, 2015

editado por rach May 7, 2015

0voto

white comentado May 7, 2015

solo edita las propiedades del objeto radios_id, por ejemplo para la opcion 5:

5 : [{
        id : 'ppt',
        disabled : false,
        checked : false
    }, {
        id : 'excel',
        disabled : false,
        checked : false
    }]

hay 2 radios ppt y excel, define las propiedades disabled o checked, en tu caso sería

ppt: checked: false, disabled: false
excel: checked: false, disabled: false

http://jsfiddle.net/vhfm1efr/2/

comentado por white (75.880 puntos) May 7, 2015

0voto

rach comentado May 7, 2015

muchas gracias me funciono super bien era justo lo que quería

comentado por rach (6.010 puntos) May 7, 2015

Pregunta

Activar o Desactivar radio button dependiendo de la opción elegida de un select

Por favor, accede o regístrate para añadir un comentario.

1 Respuesta

carlossevi comentado May 6, 2015

white comentado May 6, 2015

rach comentado May 7, 2015

rach comentado May 7, 2015

white comentado May 7, 2015

rach comentado May 7, 2015

rach comentado May 7, 2015

white comentado May 7, 2015

rach comentado May 7, 2015

white comentado May 7, 2015

rach comentado May 7, 2015

Por favor, accede o regístrate para añadir un comentario.

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

En el blog

Otras Preguntas y Respuestas

Sin Respuesta

Preguntas relacionadas

Actividad Reciente

alyvrs preguntó Oct 19

ManHol preguntó Jul 9

ArtEze respondió Abr 24

ArtEze seleccionó una respuesta Abr 24

ArtEze respondió Abr 24

ArtEze preguntó Abr 24

ArtEze respondió Abr 24

ArtEze respondió Abr 24

ArtEze comentó Abr 24

Santiago2610 comentó Mar 23

Ultimas Preguntas

alyvrs preguntó

ManHol preguntó

ArtEze preguntó

Santiago2610 preguntó

gonzalss preguntó

ParkJo preguntó

ovedg preguntó

Ehdez preguntó

pedrourday preguntó

pedrourday preguntó

Preguntas relacionadas

Usuarios Top

Todos los Usuarios Usuarios Nuevos

Etiquetas

Categorías

Etiquetas

Categorías

Conecta