Disabled toggle button when other toggle button is clicked

I have 3 toggle buttons that are called the same function.

HTML:

<button id="gen"  type="button" onchange='relasi("Gen")' > 1 </button>
<button id="imp"  type="button" onchange='relasi("Imp")' > 2 </button>
<button id="agr"  type="button" onchange='relasi("Agr")' > 4 </button>

I set my toggle button value like this:

let togButton = false;

Relasi() function:

function relasi(type) {
  if(togButton = !togButton){   //this means that the user had clicked the button so the value changed
       if(type === "Gen"){
         // set other button than Gen button disabled
       }
       if(type === "Imp"){
         // set other button than Imp button disabled
       }
       if(type === "Agr"){
        // set other button than Agr button disabled
       }
  } else {
      // this means that user hasn't clicked the button OR had clicked the same button twice
     // set ALL the buttons to enable
  }
}

Here is what I’m trying to achieve:

A toggle button that when user hasn’t clicked the button yet, the button value will be false. When user clicked the button, the value will change to true. And then, when the user clicked the button again the value will return to false (back to the original assigned value). This goes on and on.

At the same time, while one toggle button is in the state of true, I want the other toggle buttons to be disabled. This means that user only can click one button and make that button value true. To enable back other toggle buttons, user needs to click the true button again to make it false.

Hope my explanation is understandable. How can I achieve this using Vanilla Javascript?