Hur bäst dölja/inaktivera HTML-element baserat på villkor? (javascript/html)

Har behov av att visa/dölja en HTML-select funktion, baserat på utomstående villkor. Söker en enkel och direkt lösning för det.

Med andra ord: om en viss omständighet råder (i ett formulär), så vill jag att en <select> på HTML-sidan blir synlig/brukbar, och om annat/motsatt omständighet råder ska <select>-en bli osynlig eller obrukbar.

En enkel pseudo-kod av ungefär vad jag tänkt hittills, är nåt liknande såhär:

<select id="tjoho" disabled>
<option>A</option>
<option>B</option>
<option>C</option>
<option>D</option>
</select>

<script>
if (villkor) {
disabled = på
} else if (villkor B) {
disabled = av
}
</script>

Men ovanstående skulle eventuellt kräva att argumentet "disabled" måste villkorligen skrivas in i HTML-koden, eller inte. Typ:

<select id="tjoho" <script>if (villkor === sant) {document.write("disabled");} if else (villkor === falskt) {document.write("");}</script>>

Men HTML-sidan/koden godtar inte <script> inuti HTML-taggen.
Funderat även på en <div> som kan göras 'visible' eller 'invisible' baserat på villkor från nånstans.
Vad kan vara en enkel lösning på det här?

const select = document.querySelector('#tjoho');

if (villkor) {
  select.disabled = true;
} else if (villkor B) {
  select.disabled = false;
}

Tackar så mycket. Provade just. Det verkar lovande.
Upptäckte dock att if-satsen här innebär ingen "onchange" funktion(?), utan det måste man nog fixa separat, eller lägga in det i någon skript-sats där formuläret uppdateras?