JavaScript - Bei Bestätigung zur nächsten Seite
Nur wenn die Checkbox angeklickt wird, gelangt man mit dem Button auf die nächste Seite.
<script>
// Bei Bestätigung zur nächsten Seite
function check() {
if (document.Form.cb.checked == true) {
document.Form.elements["GehWeiter"].disabled = false;
}
else {
document.Form.elements["GehWeiter"].disabled = true;
}
}
</script>
<form name="Form">
<p>
<label><input type="checkbox" name="cb" onClick="check()">
Ja, ich möchte auf die nächste Seite.</label>
</p>
<p>
<input type="button"
value="...Weiter" disabled="disabled" name="GehWeiter"
onClick="window.location.href='seite.htm';">
</p>
</form>
Beispiel 2
<form>
<label for="confirm">
<input type="checkbox" id="confirm" name="confirm" required> Bestätigen
</label> -
<button name="deleteUser">Benutzerkonto löschen</button>
</form>
<script>
document.querySelector('[name="deleteUser"]').setAttribute('disabled', true);
document.querySelector('#confirm').
addEventListener('change', () =>
document.querySelector('[name="deleteUser"]').toggleAttribute('disabled')
)
</script>
Beispiel 3, ohne JavaScript
<style>
label:has(#confirm:not(:checked))+button {
pointer-events: none;
opacity: .5;
}
</style>
<form>
<label for="confirm">
<input type="checkbox" id="confirm" name="confirm" required> Bestätigen
</label> -
<button name="deleteUser">Benutzerkonto löschen</button>
</form>
Bausteine Alle Anzeigen
Eine zufällige Auswahl von Codeschnipseln
aus den Bereichen
HTML, CSS,
PHP, JavaScript und
MySQL.
<thead> Tabellenkopf
CSS - Glühende Neon Buchstaben
PHP - Bild proportional zur Breite verkleinern