javascript éviter soumettre si case non cochée

Question

! Bonjour,

J'ai un certain nombre de cases à cocher générées avec PHP. Il y a un bouton de validation. Je veux empêcher l'utilisateur de valider le formulaire sans cocher au moins une case.

J'ai ce code

var checkboxes = document.getElementsByName('date[]'); 
var btn = document.getElementById('Submit'); 
date.onchange = function(){ 
    for (var i=0;i<checkboxes.length;i++) 
    { 
     if(checkboxes[i].checked) 
     { 
     btn.disabled = false; 
     } 
     else 
     { 
     btn.disabled = true; 
     } 
    } 
} 
<form> 
.... 
<table> 
    <tr id="{{ cpt }}"> 
     <td><input type="checkbox" class="date" id="date" name="date[]" 
          checked value="{{ jdv.day }}"></td> 
     <td>{{ jdv.day }}</td> 
    </tr> 
</table> 
</form> 

Mais il ne fonctionne que pour la première case!

pouvez-vous m'aider?

Merci

Answer 1

Vous feriez mieux de faire des contre which'll nombre cochés cases à cocher et à la fin le comparer avec le nombre de num minimum de cases cochées

Answer 2

vous devez garder une variable, ce qui évite que les autres cases à cocher les résultats se chevauchent les uns les autres.

Quelque chose comme:

var toShow = true; 
var checkboxes = document.getElementsByName('date[]'); 
var btn = document.getElementById('Submit'); 
date.onchange = function(){ 
for (var i=0;i<checkboxes.length && toShow;i++) { 
    if(!checkboxes[i].checked) 
    { 
     toShow = false; 
    } 
} 
if(toShow) 
    btn.disabled = false; 
} else 
{ 
    btn.disabled = true; 
} 

Answer 3

Votre script mis button.disabled = true; pour chaque case à cocher est cochée ... cela signifie que si vous cochez une case que le dernier, ce sera toujours mis à true désactivé à la fin.

ajouter à votre fonction après btn.disabled = false;

return true; 

résultant dans ce code:

var checkboxes = document.getElementsByName('date[]'); 
var btn = document.getElementById('Submit'); 
date.onchange = function(){ 
    for (var i=0;i<checkboxes.length;i++) 
    { 
     if(checkboxes[i].checked) 
     { 
     btn.disabled = false; 
     return true; 
     } 
     else 
     { 
     btn.disabled = true; 
     } 
    } 
} 

cela arrêtera votre fonction une fois qu'il détecte la première case cochée et empêcher les suivants de la substitution de la disabled propriété de votre bouton.