I'm trying to create a function that will disable all remaining unchecked checkboxes in my form after 5 boxes are checked.
I am able to pull the values(using .length) to verify that 5 checkboxes have in fact been checked, I cannot get the disable() function wired to the remaining checkboxes properly. Any suggestions would be greatly appreciated.
JS logic is below:
document.addEventListener('DOMContentLoaded', () => {
let Checkboxes =
document.querySelectorAll('input[type="checkbox"]').length <-verifies checkbox total;
Checkboxes.addEventListener('click', (event)=>{
event.preventDefault();
checkboxLimiter();
});
});
function checkboxLimiter() {
let markedBoxCount = document.querySelectorAll('input[type="checkbox"]:checked').length; <-verifies "checked" checkbox total;
if (markedBoxCount == 5){
disable();
}
}
function disable() {
let unmarkedBoxCount = document.querySelectorAll('input[type="checkbox"]:not(:checked)') <-selector for remaining "unchecked" checkboxes;
;
unmarkedBoxCount.disabled = true;
And here is the HTML for reference:
<div id="strengthsJar">
<div id="stJar">
<p>Strategic Thinking</p>
<label class="checkbox-inline" for="usertype"> <input
type="checkbox" name="attribute" id="st-attribute" value="(1,1)"></label>
</div>
<div id="eJar">
<p>Executing</p>
<label class="checkbox-inline" for="usertype"> <input
type="checkbox" name="attribute" id="e-attribute" value="(1,-1)">
Achiever
</label>
</div>
<div id="rbJar">
<p>Relationship Building</p>
<label class="checkbox-inline" for="usertype"> <input
type="checkbox" name="attribute" id="rb-attribute" value="(-1,1)">
Adaptability
</label>
</div>
<div id="iJar">
<p>Influencing</p>
<label class="checkbox-inline" for="usertype"> <input
type="checkbox" name="attribute" id="i-attribute" value="(-1,-1)">
Activator
</label>
</div>
</div>
Aucun commentaire:
Enregistrer un commentaire