entre Desarrolladores

Recibe ayuda de expertos

Registrate y pregunta

Es gratis y fácil

Recibe respuestas

Respuestas, votos y comentarios

Vota y selecciona respuestas

Recibe puntos, vota y da la solución

Pregunta

2votos

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

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

1 Respuesta

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/

0voto

carlossevi comentado

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.

0voto

white comentado

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

0voto

rach comentado

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!!

0voto

rach comentado

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!!

0voto

white comentado

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/

0voto

rach comentado

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!!

0voto

rach comentado

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

0voto

white comentado

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/

0voto

rach comentado

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

0voto

white comentado

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/

0voto

rach comentado

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

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

Otras Preguntas y Respuestas


...

Bienvenido a entre Desarrolladores, donde puedes realizar preguntas y recibir respuestas de otros miembros de la comunidad.

Conecta