Grey out van textfield in form met JavaScript

Ik gebruik JavaScript om een textfield binnen een form te disablen zolang een bepaalde checkbox niet aangevinkt is. Wanneer de pagina geladen wordt, is het textfield inactief. Wanneer je dan de checkbox aanvinkt, wordt het textfield actief. Tot hier alles zoals gewenst. Maar als je dan de checkbox terug uitvinkt, blijft het textfield actief, hoe kan ik dat vermijden?

Ik heb deze code gevonden op het web en een beetje aangepast naar mijn situatie.
Ik ken voor de rest niets van JavaScript, dus best mogelijk dat het een triviale fout is.

[code:1:b5db95f33d]<input type=“checkbox” id=“id2” name= “interesse” value=“ja” onchange=“check();” <?php if ($_POST[‘interesse’]==“ja”) {echo “checked=“checked””;}?>>Ik heb interesse
<br>
Aantal exemplaren: <input type=“text” id=“id3” disabled=“disabled” name=“aantal_exemplaren” size=“5” value="<? echo $_POST[“aantal_exemplaren”]; ?>">

<script type=“text/javascript”>
function check() {
if (document.getElementById(‘id2’).value == ‘ja’)
document.getElementById(‘id3’).disabled = false;
else
document.getElementById(‘id3’).disabled = true;
}
</script>[/code:1:b5db95f33d]

probeer [code:1:3a7e6cb55f]if (document.getElementById('id2').checked )[/code:1:3a7e6cb55f]

De value is namelijk altijd “ja” of ie nu aangevinkt is of niet.

Bedankt! Het werkt nu.

In de code die ik op het web gevonden had, was het geen checkbox maar een select, vandaar dat ik die fout gemaakt heb.

Omdat document.getElementById('id2').checked altijd true of false is kun je het ook zo doen:

[code:1:0dc28d0e6a]function check() {
document.getElementById(‘id3’).disabled = document.getElementById(‘id2’).checked;
}[/code:1:0dc28d0e6a]

of op het change event van id2:

[code:1:0dc28d0e6a]onchange=“document.getElementById(‘id3’).disabled=this.checked;”[/code:1:0dc28d0e6a]

:wink:

Bedankt, dat is effectief wat korter, maar doet net het tegenovergestelde?

:oops: ... zo dan maar? [code:1:1c6e3ad3c6]function check() { document.getElementById('id3').disabled = !document.getElementById('id2').checked; } [/code:1:1c6e3ad3c6]

Bedankt, dat werkt :)

Nog een bijkomende vraag:
wanneer mensen in de form velden verkeerd of niet invullen, wordt de pagina herladen voorzien van de nodige meldingen en de woorden bij de desbetreffende velden rood gekleurd.
De inhoud van alle velden die al ingevuld waren wordt daarbij uiteraard terug getoond.

Maar bij dit textfield dat enkel actief mag zijn indien het checkbox is aangevinkt gaat het mis.
Indien voor het herladen van de pagina het checkbox aangevinkt is, en het textfield dus actief is, blijft na het herladen het checkbox aangevinkt (dankzij <?php if ($_POST[‘interesse’]==“ja”) {echo “checked=“checked””;}?>), maar is het textfield inactief , omdat er dan nog geen onChange event geweest is.
De gebruiker moet dan de checkbox uitvinken en terug aanvinken vooraleer de inhoud van het textfield gewijzigd kan worden.
Hoe kan dat opgelost worden?

Net als bij id2? [code:1:98a2890d08] <?php if ($_POST['interesse']!="ja") {echo "disabled="disabled"";}?> [/code:1:98a2890d08]

Thanx, werkt perfect!

Ik had ook even aan die oplossing gedacht, maar dacht dat het niet zou werken omdat de php code pas wordt uitgevoerd wanneer er op submit geklikt wordt.
Maar nu ik er nog eens over nadenk begrijp ik het wel en is het allemaal erg logisch.

Bedankt voor alle hulp, ik heb nu helemaal wat ik wou.

Nog een php tipje om je code tussen de html kort te houden...

Als je short_open_tag directive aan staat in je php configuratie kan je de code tussen de php flink inkorten.
Door slim gebruik van een ternary operator ism een php shorthand tag kan je de code dan alsvolgt neerzetten

[code:1:2ded2eb0a3]<?=$_POST[‘interesse’]!=“ja”?“disabled=“disabled””:""?>[/code:1:2ded2eb0a3]

Nader verklaard:

[code:1:2ded2eb0a3]
<?= // <?php echo
$_POST[‘interesse’]!=“ja” // statement…
? “disabled=“disabled”” // waarde ‘if true’
: “” // waarde ‘if false’
?>
[/code:1:2ded2eb0a3]

Bedankt voor de tip, maar ik verkies toch de langere versie vanwege de betere leesbaarheid voor mij als onervaren programmeur.