Desactivar inputs con radiobuttons

[ruizinho]

Hola a todos, estoy haciendo un formulario que empieza con dos opciones (radio buttons) y quiero que si eligen el segundo radio button se desactive un input del formulario.

La verdad es que ahora mismo no sé como meterle mano, así que si me guiáis un poco os lo agradecería.

Un saludo!!

[PHPeros]

Sería más sencillo de hacer con un select

[ruizinho]

Hola, gracias por responder, la verdad es que con el select funciona bien (así que me guardo el código xD) pero por cuestiones de estética para el formulario me haría falta que fuera con radio-buttons,¿me podrías indicar como sería con radio-buttons?

Gracias de nuevo!

Un Saludo!

[Alexis88]

Una solución:

Código HTML:

Activar <input type = "radio" name = "estado" value = "1" checked />
Desactivar <input type = "radio" name = "estado" value = "2" />
<input type = "text" name = "caja" />
 

Código Javascript:

[].forEach.call(document.querySelectorAll("[name=estado]"), function(radio){
    radio.addEventListener("click", function(){
        if (this.checked){
            if (this.value == 1){
                document.querySelector("[name=caja]").disabled = false;
            }
            else{
                document.querySelector("[name=caja]").disabled = true;
            }       
        }
    });
});
 

Lo que hago es simple. Primero, recorro al conjunto de radiobuttons y a cada uno le asigno una función por cada vez que se les de un clic. En la función verifico si el radiobutton está marcado; de ser así, evalúo su valor, si es igual a 1, habilito a la caja, caso contrario, la deshabilito.

Lo anterior funcionará en la mayoría de navegadores, excepto en versiones anteriores a IE9. Una alternativa de solución para navegadores antiguos:

Código Javascript:

var inputs = document.getElementsByTagName("input"),
    total = inputs.length,
    i, caja;
 
for (i = 0; i < total; i++){
    if (inputs[i].name == "caja"){
        caja = inputs[i];
        break;
    }
}
 
for (i = 0; i < total; i++){
    (function(radio){
        if (radio.name == "estado"){
            radio.onclick = function(){
                if (radio.checked){
                    if (radio.value == 1){
                        caja.disabled = false;
                    }
                    else{
                        caja.disabled = true;
                    }
                }
            };
        }
    })(inputs[i]);
}
 

Como en las primeras versiones de IE no se pueden utilizar métodos de selección como querySelector, querySelectorAll o getElementsByClassName y dado a que tanto los radiobuttons como la caja de texto son elementos <input>, los tomo a todos y usando un bucle, busco a la caja de texto y la asigno a una variable, de este modo, podré aplicarle la habilitación/deshabilitación si necesidad de volver a buscarla. En el segundo bucle, realizo un closure por cada radiobutton para evitar conflictos con los demás radiobuttons. Es una manera más segura de aplicar un conjunto de instrucciones a cada elemento dentro de un bucle. En la función anónima, verifico el nombre del elemento, si es igual a 'estado', quiere decir que es uno de los radiobutton, por lo que procedo a asignarle una función para cuando le demos un clic. Al darle clic, verificamos si está marcado; de estarlo, verificamos su valor, si es igual a 1, habilitamos a la caja de texto, caso contrario, la deshabilitamos.



Saludos

[ruizinho]

Gracias Alexis, perfecto!! y encima me pones el código para la compatibilidad con IE!!

Muchas gracias a los dos por ayudarme!!

Un abrazo!

[Alexis88]

Ahora que estoy un poco más lúcido y lo analizo mejor, no es necesaria la condición para verificar si el radiobutton está marcado pues, al clickear un radiobutton, siempre se marcará. Tuve un lapsus generado por el sueño y lo confundí con los checkbox en donde sí es necesaria esa verificación.

Saludos

[IsaBelM]

aún buscando compatibilidad con versiones antiguas de ie, es más sencillo que lo expuesto

function EventoIE8(elemento, nomevento, fnc) {

if (elemento.addEventListener) {

elemento.addEventListener(nomevento, fnc, false);

} else if (elemento.attachEvent) {

var foo = function() {fnc.call(elemento, window.event);}
elemento.attachEvent('on' + nomevento, foo);
elemento[fnc.toString() + nomevento] = foo;
}
}




window.onload = function() {


for (var i = 0, radio = document.getElementsByName("estado"); i < radio.length; i++) {

EventoIE8(radio[i], 'click', function(){

document.querySelector("[name=caja]").disabled = this.value;

});
}


}




Activar <input type = "radio" name = "estado" value = "" checked />
Desactivar <input type = "radio" name = "estado" value = "true" />
<input type = "text" name = "caja" />