Adicionar o atributo

Fala Yago, tudo bem?

Irei listar alguns pontos para que isso funcione!

Na imagem abaixo numerei as minhas alterações:

1 - Você precisa selecionar o botão (que nesse caso é um checkbox) e adicionar um evento de click nele, para que ative alguma função ao ser clicado, que nesse caso é a função que você criou, chamada myFunction. Nesse caso utilizei o método addEventListener que recebe como parâmetro o evento que você deseja, que nesse caso foi o click, e recebe como segundo parâmetro uma função (pode ser uma função anônima). Porém também há outros jeitos de adicionar um evento, em que você coloca o evento direto no seu html. Veja abaixo:

Aqui adicionamos o evento de onClick diretamente no html que aciona a sua função, veja a lista de evento que existem aqui.

2 - Um segundo ponto, é que não havia uma classe chamada demo então troquei para um querySeletor e especifiquei uma classe que realmente exista no seu html.

3 - Último ponto, o método setAttribute recebe 2 parâmetros, que é: o atributo e o valor desse atributo, nesse caso atribuimos para o disabled o valor de true, para que desabilite a check box.

(Obs: Você havia colocado um disabled no checkbox no seu html, assim impossibilitando que a pessoa clique, então eu também o removi do html)

Espero ter ajudado e bons estudos, qualquer dúvida pode contar com a gente ;D

Então, fiz as mudanças sugeridas. E tenho esse retorno

Poderia compartilhar como ficou o seu código?

                                    <div class="col-md-6">
                                      <label class="custom-control custom-checkbox">
                                        <input onclick="myFunction()" type="checkbox" class="custom-control-input" name="<?= $x['competencia_id'] ?>" value="<?= $x['competencia_id'] ?>">
                                        <span class="custom-control-label"><?= $x['competencia'] ?></span>
                                      </label>
                                    </div>

  <script type="text/javascript">

  var checkbox = document.querySelector('.custom-control-input').addEventListener('click', myFunction);

  contador = 0;

  function myFunction() {
    contador = contador+1;
    if(contador>5){
      console.log('atingiu');

      var demo = document.querySelector("custom-control-input");
      demo.setAttribute("disabled", true);
    }

  }
  </script>

No onclick, você escreve só o nome da função, sem os ()

Tentei dessa forma , mas nada acontece, nem a mensagem do console.log aparece, acredito que sem o ( ) não funciona ..

Me confundi, descupe, é com () mesmo, você utilizou duas formas de adicionar um ouvidor de eventos (diretamente no html e no javascript), remova algum dos dois, e veja se retorna algum erro no console

Tentei, o erro continua o mesmo ): No momento o fonte está assim:

                                    <div class="col-md-6">
                                      <label class="custom-control custom-checkbox">
                                        <input onclick="myFunction()" type="checkbox" class="custom-control-input" name="<?= $x['competencia_id'] ?>" value="<?= $x['competencia_id'] ?>">
                                        <span class="custom-control-label"><?= $x['competencia'] ?></span>
                                      </label>
                                    </div>

  <script type="text/javascript">
  contador = 0;

  function myFunction() {
    contador = contador+1;
    if(contador>5){
      console.log('atingiu');

      var demo = document.querySelector("custom-control-input");
      demo.setAttribute("disabled", true);
    }

  }
  </script>

Você esqueceu de colocar o . antes de custom-control-input no document.querySelector. Substitua:

 var demo = document.querySelector("custom-control-input");

Para:

 var demo = document.querySelector(".custom-control-input"); //Com esse ponto antes do nome da classe, pois o querySelector usa seletores css para fazer a seleção de um elemento.

Boa, não apresentou mais erros ! Entretanto, os campos não ficaram com o atributo disabled :/

Nos mostre seu código novamente por favor, pois aqui ficou, e eu copiei exatamente o seu código acima, apenas adicionei o ponto

                                    <div class="col-md-6">
                                      <label class="custom-control custom-checkbox">
                                        <input onclick="myFunction()" type="checkbox" class="custom-control-input" name="<?= $x['competencia_id'] ?>" value="<?= $x['competencia_id'] ?>">
                                        <span class="custom-control-label"><?= $x['competencia'] ?></span>
                                      </label>
                                    </div>

  <script type="text/javascript">

  contador = 0;

  function myFunction() {
    contador = contador+1;
    if(contador>5){
      console.log('atingiu');

      var demo = document.querySelector(".custom-control-input");

      demo.setAttribute("disabled",true);
    }

  }
  </script>

Esta funcionando normalmente aqui, caso esteja olhando pelo inspecionar, é normal não aparecer nenhum atributo a mais, o checkbox simplesmente não irá funcionar

Ahhhhhhhh entendi, eu ja tive um problema parecido ... Ele está dando disabled sim, mas apenas no primeiro checkbox com a classe ....

Tenho uma estrutura de repetição em php que cria varios checkbox

                                  <?php foreach($itens as $x): ?>
                                    <div class="col-md-6">
                                      <label class="custom-control custom-checkbox">
                                        <input onclick="myFunction()" type="checkbox" class="custom-control-input" name="<?= $x['competencia_id'] ?>" value="<?= $x['competencia_id'] ?>">
                                        <span class="custom-control-label"><?= $x['competencia'] ?></span>
                                      </label>
                                    </div>
                                  <?php endforeach; ?>

Vou ver como resolvo isso, de todo forma! Muitoooo Obrigado!

Aa sim, você não nos explicou que tinha mais checkboxs haha, mas você pode resolver isso, alterando document.QuerySelector para document.querySelectorAll que ao invés de selecionar apenas um, seleciona todos elementos com aquele seletor. Porém você terá que fazer um looping nesse resultado, devido que esse metodo nos retorna uma array com todos os elementos. Você pode fazer algo mais ou menos assim:

  <script type="text/javascript">

  contador = 0;

  function myFunction() {
    contador = contador+1;
    if(contador>5){
      console.log('atingiu');

      var demo = document.querySelectorAll(".custom-control-input"); //Alterei para querySelectorAll

     demo.forEach((dem) => {
         dem.setAttribute("disabled",true);
     }) //Faço um looping adicionando o disabled a todos os checkboxes.

     }

  }
  </script>

Veja mais sobre o método forEach clicando aqui

Caso eu tenha ajudado, lembre-se de marcar minha resposta como solucionado, para ajudar outro alunos com essa mesma dúvida :D

Porra cara, isso mesmo! Você é Demais !!! Obrigado <3

Surgiu uma dúvida,

Se nesse foreach eu quisesse sempre que ele passasse por um item marcado eu criasse um <input type"hidden"> com o valor e o nome do meu checkbox, como seria ?

     demo.forEach((dem) => {
         dem.setAttribute("disabled",true);
     }) 

Opa, poderia abrir um outro tópico sobre esse assunto por favor?