Hide a radio button when clicking another radio button

Question

Good morning guys, I’m having a question on the radio button, I have no idea what to do.. I’m a little new to php / javascript and wanted to understand how to make it work. I have a grid of courses, in this grid I need the student to fill his preference with 5 topics, so what I did, I created a div where separates the radio Buttons side by side, getting like this.

(3) Web Design
(5) Assembly and maintenance
(4) Office routines
(2) Hotels
(1) Customer service

Basically I need the user to click on which it prefers from 1 to 5, as I think the easiest way to display this and facilitate would be with radio button, I would like it so if the user click on Web Design with option 1, the Web Design field conceal so that you no longer click and decide the next ones sequentially.

Answer 1

If you want to allow multiple selections, you should not use the Radio Button Because his idea is that you choose only one. I suggest you use Checkboxes for that. I also suggest that hide the element, but desabilite-o. Remember that once disabled, the user will not be able to uncheck, with this, you need to ensure some way to restart the selection.

See the example below:

checkboxes = document.querySelectorAll(".ck-preferencias");
prioridades = document.getElementById("prioridades");
btLimpar = document.getElementById("limpar");

checkboxes.forEach(function(checkbox){
  checkbox.addEventListener('click', function(){
    pai = checkbox.closest("li");
    escolhido = document.createElement("li");
    escolhido.name="prioridades[]";
    escolhido.innerHTML = pai.innerText;
    checkbox.disabled = true;
    checkbox.checked = false;
    prioridades.appendChild(escolhido);
  });
});

btLimpar.addEventListener('click', function(){
  prioridades.innerHTML = "";  
  checkboxes.forEach(function(checkbox){
    checkbox.disabled = false;
  });
});

<ul>
  <li><input class="ck-preferencias" type="checkbox" value="web-design" />Web design</li>
  <li><input class="ck-preferencias" type="checkbox" value="manutencao" />Manutenção</li>
  <li><input class="ck-preferencias" type="checkbox" value="rotinas" />Rotinas de Escritório</li>
  <li><input class="ck-preferencias" type="checkbox" value="hotelaria" />Hotelaria</li>
  <li><input class="ck-preferencias" type="checkbox" value="atendimento" />Atendimento ao cliente</li>
</ul>

<ol id="prioridades">
</ol>

<button id="limpar">Limpar seleção</button>