J’ai un tas de cases à cocher comme ça. Si la case à cocher “Check Me” est cochée, toutes les 3 autres cases à cocher doivent être activées, sinon elles doivent être désactivées. Comment puis-je le faire en utilisant jQuery?
Changez légèrement votre balisage:
et alors
$(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { if (this.checked) { $("input.group1").removeAttr("disabled"); } else { $("input.group1").attr("disabled", true); } }
Vous pouvez le faire en utilisant des sélecteurs d’atsortingbut sans introduire l’ID et les classes, mais c’est plus lent et (à mon humble avis) plus difficile à lire.
C’est la solution la plus récente.
$(function() { enable_cb(); $("#group1").click(enable_cb); }); function enable_cb() { $("input.group1").prop("disabled", !this.checked); }
Voici les détails d’utilisation pour .attr()
et .prop()
.
Utilisez la nouvelle fonction .prop()
:
$("input.group1").prop("disabled", true); $("input.group1").prop("disabled", false);
La fonction .prop()
n’est pas disponible, vous devez donc utiliser .attr()
.
Pour désactiver la case à cocher (en définissant la valeur de l’atsortingbut disabled)
$("input.group1").attr('disabled','disabled');
et pour activer (en supprimant l’atsortingbut entièrement) faire
$("input.group1").removeAttr('disabled');
Si vous travaillez avec un seul élément, il sera toujours plus rapide d’utiliser DOMElement.disabled = true
. L’avantage d’utiliser les fonctions .prop()
et .attr()
est qu’elles fonctionneront sur tous les éléments correspondants.
// Assuming an event handler on a checkbox if (this.disabled)
ref: Réglage “vérifié” pour une case à cocher avec jQuery?
$("#chkAll").click(function() { $(".chkGroup").attr("checked", this.checked); });
Avec des fonctionnalités supplémentaires pour garantir que la case à cocher tout est cochée / décochée si toutes les cases à cocher individuelles sont cochées:
$(".chkGroup").click(function() { $("#chkAll")[0].checked = $(".chkGroup:checked").length == $(".chkGroup").length; });
$(document).ready(function() { $('#InventoryMasterError').click(function(event) { //on click if(this.checked) { // check select status $('.checkerror').each(function() { //loop through each checkbox $('#selecctall').attr('disabled','disabled'); }); }else{ $('.checkerror').each(function() { //loop through each checkbox $('#selecctall').removeAttr('disabled','disabled'); }); } }); }); $(document).ready(function() { $('#selecctall').click(function(event) { //on click if(this.checked) { // check select status $('.checkbox1').each(function() { //loop through each checkbox $('#InventoryMasterError').attr('disabled','disabled'); }); }else{ $('.checkbox1').each(function() { //loop through each checkbox $('#InventoryMasterError').removeAttr('disabled','disabled'); }); } }); });
Voici un autre exemple utilisant JQuery 1.10.2
$(".chkcc9").on('click', function() { $(this) .parents('table') .find('.group1') .prop('checked', $(this).is(':checked')); });