Desactivar inputs con radiobuttons

[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