Javascript-forum

Hi ihr Lieben,

folgendes Thema:

Ich habe zwei Checkboxen in einem Formular.
Die erste Checkbox ist kein Pflichtfeld
Die zweite Checkbox ist ein Pflichtfeld.
Wird allerdings die erste Checkbox angehakt, soll die zweite Chebock verschwinden und auch nicht mehr required sein, damit das Formular abgeschickt werden kann.

Dass die zweite Checkbox ausgeblendet wird, wenn die erste ausgewählt wurde hab ich hinbekommen. Aber ich checks, trotz der ganzen Anleitungen im Netz, noch nicht, wie aus der zweite Checkbox dann aus einem Pflichtfeld kein Pflichtfeld mehr wird.

Vielleicht suche ich auch einfach nicht nach den richtigen Schlagwörtern.

Reicht euch das als Infos um mir weiterhelfen zu können? Smile

Besten Dank!

Lösch den HTML code der Checkbox , oder lösch das require Attribute von der Checkbox .
Das kannst du beides mit Javascript machen.
Habe es noch nicht getestet, doch ich denke mal das es klappen sollte

Hi Crynos,
ich habe dir ein Beispil erstellt. Das Element wird komplett entfernt und eine Entfernung des required-Attrbut muss damit nicht mehr erfolgen. Hier mein Beispiel:

Code:
<!DOCTYPE html>

<html lang="de">

<head>

    <meta charset="UTF-8">

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Checkbox</title>

    <script>

        var elem;

        document.addEventListener('DOMContentLoaded', ()=>{

            let checkbox1 = document.getElementById('checkbox1');

            createSecondCheckbox();

            checkbox1.addEventListener('change', ()=>{

                if(checkbox1.checked == true) {

                    removeSecondCheckbox();

                } else {

                    if(!!document.getElementById('checkbox2')==false) {

                        createSecondCheckbox();

                    }

                }

            });

        });

        function createSecondCheckbox() {            

            elem = document.createElement('input'); elem.setAttribute('type', 'checkbox');

            elem.setAttribute('id', 'checkbox2'); elem.setAttribute('name', 'checkbox2');

            elem.setAttribute('required', 'required'); document.body.appendChild(elem);

        }

        function removeSecondCheckbox() {

            elem.remove();

        }

    </script>

</head>

<body>

    <input type="checkbox" name="checkbox1" id="checkbox1">    

</body>

</html>

Viel Erfolg
rzscout

Crynos

admin

rzscout