dimanche 18 juillet 2021

How to use JavaScript logic on radio buttons?

I am having issues with radio button logic using JavaScript.

I have 3 sessions with 3 workshops in each. I'm trying to use JavaScript so that if I select the second workshop in session 1, I cannot select anything in session 2.

Also, I'm trying to make it so that if I select the third workshop in session 2, I also must select the second workshop in session 3.

Finally, I'm trying to make it so the second workshop in session 3 cannot be selected unless the second workshop in session 2 is already selected.

Here is my HTML:

<fieldset class="workshop">
                        <legend>Workshop Information</legend>
                    <p>Session 1 Workshop: (12:00 p.m. - 3:00 p.m.)
                        <label>
                            <input type="radio" name="workshop1" id="gttp" value="Guitar Technician Training Program"
                                   onchange="logic()"  required="required"/></label> Guitar Technician Training Program
                        <label>
                            <input type="radio" name="workshop1" id="smg" value="Setup & Maintenance for Guitar"
                                   onchange="logic()"/></label> Setup & Maintenance for Guitar
                        <label>
                            <input type="radio" name="workshop1" id="agm" value="Acoustic Guitar Making"
                                   onchange="logic()"   /></label> Acoustic Guitar Making
                    </p>
                        <p>Session 2 Workshop: (3:30 p.m. - 6:00 p.m.)
                            <label>
                                <input type="radio" name="workshop2" id="egm" value="Electric Guitar Making"
                                       required="required"/></label> Electing Guitar Making
                            <label>
                                <input type="radio" name="workshop2" id="gd" value="Guitar Design"
                                       /></label> Guitar Design
                            <label>
                                <input type="radio" name="workshop2" id="f" value="Fretting"
                                       onchange="logic()"  /></label> Fretting
                        </p>
                        <p>Session 3 Workshop: (7:00 p.m. - 8:30 p.m.)
                            <label>
                                <input type="radio" name="workshop3" value="Bone Nut Making"
                                       required="required"/></label> Bone Nut Making
                            <label>
                                <input type="radio" name="workshop3" id="grr" value="Guitar Repair and Restoration"
                                       onchange="logic()" disabled/></label> Guitar Repair and Restoration
                            <label>
                                <input type="radio" name="workshop3" value="Guitar Electronics Repair and Upgrades"
                                       /></label> Guitar Electronics Repair and Upgrades
                        </p>
                        </fieldset>

Here is my JavaScript:

function logic() {
    if (document.getElementById('smg').checked) {
        document.getElementById('egm').disabled = true;
        document.getElementById('gd').disabled = true;
        document.getElementById('f').disabled = true;
    }

    if (document.getElementById('gttp' || 'agm').checked) {
        document.getElementById('egm').disabled = false;
        document.getElementById('gd').disabled = false;
        document.getElementById('f').disabled = false;
        document.getElementById('egm').checked = false;
        document.getElementById('gd').checked = false;
        document.getElementById('f').checked = false;
    }

    if (document.getElementById('f').checked) {
        document.getElementById('grr').disabled = false;
        document.getElementById('grr').checked = true;
    }

}

Aucun commentaire:

Enregistrer un commentaire