disable buttons by name

Question

I’m trying to give disabled on all buttons with the same name, but it doesn’t work, what I’m doing wrong?

//HTML BOTÃO QUE EU QUERO DESATIVAR
<button class="teclado" id="Q" name="nameTeclado" onClick="forca(this.id);">Q</button>
//HTML BOTÃO QUE ESTOU USANDO PARA DESATIVAR
<button onClick="teste();">teste</button>
//JS
function teste() {
document.getElementsByName("nameTeclado").disabled = "true";
}

There are many buttons that I need to disable at once, so I can’t do with get.elementById (which in this case works)

Answer 1

The problem is because when you search for the elements by name podem existir vários elementos com o mesmoname(o que é o seu caso), então ogetElementsByNameirá retornar vários elementos. Para setar o disabled de todos os elementos, você precisará percorrer esse array setando o atributodisabledpratrue` that way:

//aqui você pega todos os elementos do mesmo nome e salva numa variável
var botoes = document.getElementsByName("nameTeclado");

//como o getElementsByName retorna uma NodeList e não ArrayList, precisa transformar em Array pra conseguir usar o forEach 
var botoesList = Array.prototype.slice.call(botoes);

//aqui você percorre o array botoes e seta o disabled para true
botoesList.forEach(function(element) {
    element.disabled = true;
});

Sources:

HTML DOM getElementsByName documentation()

Documentation Array.prototype.foreach()

Answer 2

All buttons with the same name

function teste() {
   //quantidade de elementos com name = nameTeclado
   var x = document.getElementsByName("nameTeclado").length;
   for(i=0;i<x;i++){
     document.getElementsByName("nameTeclado")[i].disabled = "true";
   }
}

<button class="teclado" id="Q1" name="nameTeclado" onClick="forca(this.id);">Q</button>
<button class="teclado" id="Q2" name="nameTeclado" onClick="forca(this.id);">Q</button>
<button class="teclado" id="Q3" name="nameTeclado" onClick="forca(this.id);">Q</button>
<button class="teclado" id="Q4" name="nameTeclado" onClick="forca(this.id);">Q</button>
<button class="teclado" id="Q5" name="nameTeclado" onClick="forca(this.id);">Q</button>
<button class="teclado" id="Q6" name="nameTeclado" onClick="forca(this.id);">Q</button>


<button onClick="teste();">teste</button>

I put different ID because Ids are unique and besides you will have to pass different id on onClick="forca(this.id)