J'ai besoin du javascript checkboxes.click (function()) pour démarrer lorsque la page est chargée

Question

J'utilise le code js suivant pour désactiver le bouton d'envoi de formulaire jusqu'à ce qu'au moins une case à cocher soit cochée.

var checkboxes = $("input[type='checkbox']"), 
    submitButt = $("input[type='submit']"); 

checkboxes.click(function() { 
    submitButt.attr("disabled", !checkboxes.is(":checked")); 
}); 

Le problème est que le code ne fonctionne pas lors du chargement initial de la page. Lorsque l'utilisateur accède à la page pour la première fois, il peut cliquer sur Soumettre, mais s'il vérifie quelque chose puis décoche tout, l'envoi est alors désactivé.

Il semble que j'ai besoin du code pour démarrer lors du chargement initial de la page. Aucune suggestion?

Answer 1

Ajoutez submitButt.attr("disabled", !checkboxes.is(":checked")); pour désactiver le bouton d'envoi en premier. En outre, mieux l'envelopper dans soit domready ou onload pour s'assurer que jQuery peut accéder au DOM entièrement rendu.

$(function() { 
 
    var checkboxes = $("input[type='checkbox']"), 
 
      submitButt = $("input[type='submit']"); 
 

 
    checkboxes.click(function() { 
 
     submitButt.attr("disabled", !checkboxes.is(":checked")); 
 
    }); 
 
    
 
    // Add this line to set init status of the submit. 
 
    // submitButt.attr("disabled", true)); is ok as you don't have any checked checkbox when page loaded. 
 
    submitButt.attr("disabled", !checkboxes.is(":checked")); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<input type="checkbox" id="c1"/ >c1 
 
<input type="checkbox" id="c2"/ >c2 
 
<input type="checkbox" id="c3"/ >c3 
 
<input type="submit" value="click" />

Answer 2

Depuis que vous utilisez jQuery utiliser sa fonction ready:

$(document).ready(function(){ 

    var checkboxes = $("input[type='checkbox']"), 
    submitButt = $("input[type='submit']"); 

    checkboxes.click(function() { 
     submitButt.attr("disabled", !checkboxes.is(":checked")); 
    }); 
}); 

Ce code de façon se n'exécutée lorsque la page est chargée et jQuery est prêt. Les gestionnaires de clic peuvent donc être définis sur des cases à cocher qui existent réellement.

Answer 3

2 options: 1) ajouter dans votre code html l'attribut "désactivé"; 2) Utilisez ce code

document.addEventListener("DOMContentLoaded", function(event) { 
    var checkboxes = $("input[type='checkbox']"), 
     submitButt = $("input[type='submit']"); 

    checkboxes.click(function() { 
     submitButt.attr("disabled", !checkboxes.is(":checked")); 
    }); 
}); 

Answer 4

Vous pouvez utiliser les éléments suivants:

window.onload = function() { 
     submitButt.attr("disabled", !checkboxes.is(":checked")); 
} 

... et extérioriser le contenu en fonction qui est appelée pour onload et checkboxes.click.

Answer 5

il suffit de créer une fonction et l'appeler à la page charge et clic de chéquier.

Remarque: vous pouvez modifier le nom de la fonction.

S'il vous plaît vérifier ci-dessous l'extrait de code:

var checkboxes = $("input[type='checkbox']"); 
 
var submitButt = $("input[type='submit']"); 
 

 
var onloadCheckboxesCheck = function() { 
 
    submitButt.attr("disabled", !checkboxes.is(":checked")); 
 
} 
 

 
onloadCheckboxesCheck(); 
 

 
checkboxes.click(function() { 
 
    onloadCheckboxesCheck(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<input type="checkbox" name="lname"> 
 
    <input type="checkbox" name="lname"> 
 
     <input type="checkbox" name="lname"> 
 
      <input type="checkbox" name="lname"> 
 
    <input type="submit" value="Submit">

Answer 6

Tout ce que vous avez besoin est de déclencher l'événement:

$(function() { 
 
    $('input[type=checkbox]').on('change', function(e) { 
 
    $('input[type=submit]').prop('disabled', 0 === $('input[type=checkbox]:checked').length); 
 
    }).trigger('change'); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script> 
 
<input type="checkbox" /> 
 
<input type="checkbox" /> 
 
<input type="checkbox" /> 
 
<input type="submit" />

• .trigger('change') déclenchera l'événement de modification sur la case à cocher.
• $('input[type=checkbox]:checked') vous donnera la liste des checked, des cases à cocher