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