Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

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

1
Skriv svar
Permalänk
Medlem
●

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?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●

Bara hämta ut din select via querySelector.

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

Sedan:

if (villkor) {
  select.disabled = true;
} else if (villkor B) {
  select.disabled = false;
}
Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av cfj:

Bara hämta ut din select via querySelector.

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

Sedan:

if (villkor) {
  select.disabled = true;
} else if (villkor B) {
  select.disabled = false;
}
Gå till inlägget

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?

Redigera
Citera flera Citera
1
Skriv svar