Error funcion habilita y deshabilita removeAttribute is not a function

[webtexcoco]

hola que tal compañeros

me ando iniciando en javascript, estoy tratando de hacer una funcion que me habilite y deshabilite cierto grupo de campos de texto mi función que tengo es esta

Código Javascript:

function seleccion(cualidades,propiedades,selec){
 
            var rad = document.getElementById(selec);
 
            if(rad.checked){
                document.getElementsByName(cualidades).removeAttribute('disabled', 'disabled');
                document.getElementsByName(propiedades).removeAttribute('disabled', 'disabled');
            }else{
                document.getElementsByName(cualidades).setAttribute('disabled', 'disabled');
                document.getElementsByName(propiedades).setAttribute('disabled', 'disabled');
            }
        }
 

y mi html es este

Código HTML:

<table border="1">
        <tr>
            <th>A</th>
            <th>B</th>
        </tr>
        <tr>
            <td>
                <p>Cualidades 1<br>
                    <input type="text" name="cualidades1[]" disabled><br>
                    <input type="text" name="cualidades1[]" disabled><br>
                    <input type="text" name="cualidades1[]" disabled><br>
                    <input type="text" name="cualidades1[]" disabled><br>
                    <input type="text" name="cualidades1[]" disabled><br>
                </p>
                <p>Propiedades 1<br>
                    <input type="text" name="propiedades1[]" disabled><br>
                    <input type="text" name="propiedades1[]" disabled><br>
                    <input type="text" name="propiedades1[]" disabled><br>
                    <input type="text" name="propiedades1[]" disabled><br>
                    <input type="text" name="propiedades1[]" disabled><br>
                    <input type="radio" id="1" onclick="seleccion('cualidades1[]','propiedades1[]','1')" name="opcion">
                </p>
            </td>
            <td>
                <p>Cualidades 2<br>
                    <input type="text" name="cualidades2[]" disabled><br>
                    <input type="text" name="cualidades2[]" disabled><br>
                    <input type="text" name="cualidades2[]" disabled><br>
                    <input type="text" name="cualidades2[]" disabled><br>
                    <input type="text" name="cualidades2[]" disabled><br>
                </p>
                <p>Propiedades 2<br>
                    <input type="text" name="propiedades2[]" disabled><br>
                    <input type="text" name="propiedades2[]" disabled><br>
                    <input type="text" name="propiedades2[]" disabled><br>
                    <input type="text" name="propiedades2[]" disabled><br>
                    <input type="text" name="propiedades2[]" disabled><br>
                    <input type="radio" id="2" onclick="seleccion('cualidades2[]','propiedades2[]','2')" name="opcion">
                </p>
            </td>
        </tr>
    </table>
 

la idea es que cuando presione el botón radio se habilite uno u otro grupo de campos de texto,
pero al darle click al radio javascript me arroja este error

Uncaught TypeError: document.getElementsByName(...).removeAttribute is not a function

he tratado de buscar y buscar pero no hallo que estoy haciendo mal.

que puede estar pasando? alguna idea? no se mucho sobre javascript, ojala puedan orientarme un poco

*mando los parámetros de la función porque estos campos vienen de una base de datos

gracias por tu ayuda!!!

[Alexis88]

El método .getElementsByName() devuelve una lista de nodos, por lo que para aplicar el efecto que deseas, tendrás que recorrerlo con ayuda de una estructura cíclica y afectar a cada elemento uno por uno.

Por cierto, el método .removeAttribute() solo acepta un argumento, no dos.

[webtexcoco]

Iniciado por Alexis88

El método .getElementsByName() devuelve una lista de nodos, por lo que para aplicar el efecto que deseas, tendrás que recorrerlo con ayuda de una estructura cíclica y afectar a cada elemento uno por uno.

Por cierto, el método .removeAttribute() solo acepta un argumento, no dos.

gracias Alexis88 por tu gran ayuda.

mira lo que he intentado hacer

Código Javascript:

<script>
    function seleccion(cualidades,propiedades,selec){
 
        var rad = document.getElementById(selec);
        var cua = document.getElementsByName(cualidades);
        var pro = document.getElementsByName(propiedades);
 
        var totacua = cua.length;
        var totapro = pro.length;
 
        for(var i = 0; i < totacua; i++){
            //console.log("hola");
            if(rad.checked){
                cua.removeAttribute('disabled');
                pro.removeAttribute('disabled');
            }else{
                cua.setAttribute('disabled');
                pro.setAttribute('disabled');
            }
        }
    }
 

al presionar el input radio la consola me arroja el error

Uncaught TypeError: cua.removeAttribute is not a function

y no se que pueda estar haciendo mal.

intente hacerlo por el id (document.getElementById) en lugar de usar name y si me funciona con id. Solo que no puedo usar id porque deben ser varios input text y para eso es el name (document.getElementsByName) según entiendo.

bueno ojala puedan orientarme y muchas gracias por tu gran ayuda!!!

[Alexis88]

Te falta indicar el número de elemento que estás editando, como si se tratara de un array. Solo necesitas utilizar la bracket notation:

Código Javascript:

cua[i].removeAttribute('disabled');
pro[i].removeAttribute('disabled');
 

Y, a diferencia del método .removeAttribute(), el método .setAttribute() sí acepta dos argumentos; uno, para indicar el atributo, y dos, para indicar el valor que se asignará al atributo en cuestión.