jeudi 2 août 2018

Disable checkboxes after a certain condition is met using only Vanilla JS

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