JS walidacja checbox

Question

Cześć.

Robię walidację checkbox opartą na js.Mam jednak mały problem ponieważ kod nie działa zbyt dobrze.Otóż po zaznaczeniu pierwszego chcekboxa pokazuje mi zero zaznaczonych a drugiego już nie mogę w ogóle zaznaczyć w sensie klika na niego ale nie odfajkowuje się.Walidacja ma polegać , że po zaznaczeniu 4 losowych checkbox ma pokazać komunikat i wyłączyć możliwość dodawani w innych.Mój kod :

function validation() {
    document.querySelector('#formTest').addEventListener('click', function(e) {
        e.preventDefault();
        var checkedCount = 0;
        for(var i=0; i<9; i++){
            var checkboxes = document.querySelectorAll('input[name="pole'+i+'"]');
        }
        for (const chk of checkboxes) {
            if (chk.checked) {
                checkedCount++;
            }
        }
        if (checkedCount < 2) {
            alert('Wybrałeś ' +checkedCount+' owoce, a musisz wybrać minimum 2');
        } else {
            alert('Wybrałeś ' +checkedCount+' owoce. Bądź pozdrowiony!');
        }
    });
}

i kod html z checkboxem :

<form id="validation()">
<div class="col-md-6">
            <label><input type="checkbox" name="pole1" onchange="validation()" value="1"> 1</label><br>
            <label><input type="checkbox" name="pole2" onchange="validation()" value="2"> 2</label><br>
            <label><input type="checkbox" name="pole3" onchange="validation()" value="3"> 3</label><br>
            <label><input type="checkbox" name="pole4" onchange="validation()" value="4"> 4</label><br>
            <label><input type="checkbox" name="pole5" onchange="validation()" value="5"> 5</label><br>
        </div>
        <div class="col-md-6">
            <label><input type="checkbox" name="pole6" onchange="poleSix()" value="6"> 6</label><br>
            <label><input type="checkbox" name="pole7" onchange="validation()" value="7"> 7</label><br>
            <label><input type="checkbox" name="pole8" onchange="validation()" value="8>  8</label><br>
            <label><input type="checkbox" name="pole9" onchange="validation()" value="9"> 9</label><br>
        </div>
    </div>
</form>

 

Answer 1

Znalazłem błąd i wiem dla czego nie zliczało mi ile jest zaznaczonych.Mam tylko kłopot bo nie wiem  jak teraz tą liczbę nie zaznaczonych zamienić aby była wyłączona : 

function validation() {
        var checkedCount = 0;
        for(var i=0; i<10; i++){
            var checkboxes = document.querySelectorAll('input[name="pole'+i+'"]');

            for (var chk of checkboxes) {
                if (chk.checked) {
                    checkedCount++;
                }
            }
            if (checkedCount < 4) {
                $('.turnOn').addClass('change');
                $('.turnOn').removeClass('turnOn');
            } else {
                 for(var off of checkboxes){
                     if(off.checked){
                     }else{
                        //document.querySelector('input[name="pole'+off+'"]').disabled = false;

                        console.log(off.disabled);
                     }
                 }
                $('.change').addClass('turnOn');
                $('.change').removeClass('change');
            }
        }
}

W miejscu console.log(off.disabled) jest już po spełnionym warunku : zaznaczone 4 checkox i pokaż te nie aktywne.I teraz mam problem bo nie wiem jak to zadziałać bo wartość off jest :object HTMLInputElement i nie za bardzo można to użyć do jakiej kol-wiek pętli.Chyba ,że się da jakość to rozbić aby wartość off nie miała całego inputa a tylko jego name ?

Comments

A czy jest to możliwe i jak to zrobić aby pobrać określoną długość znaków z elementu do którego jest przypisany cały tag input . W senie jaj pobieram cały do off pobieram cały element inputa wraz z name i czy można jakoś od niego odseparować w samo name ?

let text = off;
let text1 = "<input type=\"checkbox\" name=\"pole1\" onchange=\"validation()\" value=\"pictogram/ghs-01.png\">";
console.log(text.substr(33, 1));

normalnie to nie mam problemów jeśli chodzi o pobranie z text1 ,Ale sytuacja polega na tym ,że text = off posiada cały ten tag text1 i czy można z niego ściągnąć samo name ?