case à cocher unique met à jour l'état de plusieurs cases à cocher

Question

J'ai un groupe de cases à cocher, l'une d'entre elles porte l'étiquette 'Aucun'. Lorsque cette case est cochée, j'aimerais que les autres soient désactivés. Si la case "Aucune" n'est pas cochée, les cases à cocher qui ont été désactivées sont réactivées.

J'ai le code suivant:

$(document).ready(function(){ 
$("#select_none").click(function() 
{ 
$('#select_blue').attr('disabled', true); 
$('#select_green').attr('disabled', true); 
$('#select_red').attr('disabled', true); 
$('#select_black').attr('disabled', true);  
$('#select_white').attr('disabled', true); 
$('#select_yellow').attr('disabled', true); 
$('#select_pink).attr('disabled', true); 

}); 
}); 

Cela désactive tout simplement si la case a été cliqué sur, il ne bascule pas.

Quelqu'un pourrait m'aider avec la fonctionnalité de bascule?

Answer 1

Essayez ce code

$(document).ready(function(){ 
$("#select_none").click(function() 
{ 
    if(this.checked) { 
    $('#select_blue').attr('disabled', true); 
    $('#select_green').attr('disabled', true); 
    $('#select_red').attr('disabled', true); 
    $('#select_black').attr('disabled', true);  
    $('#select_white').attr('disabled', true); 
    $('#select_yellow').attr('disabled', true); 
    $('#select_pink').attr('disabled', true); 
    }else { 
     $('#select_blue').removeAttr('disabled'); 
    $('#select_green').removeAttr('disabled'); 
    $('#select_red').removeAttr('disabled'); 
    $('#select_black').removeAttr('disabled');  
    $('#select_white').removeAttr('disabled'); 
    $('#select_yellow').removeAttr('disabled'); 
    $('#select_pink').removeAttr('disabled'); 
    } 

}); 
}); 

Answer 2

Vous pouvez utiliser le toggle event.

Pendant que vous y êtes, vous pouvez aussi envisager de donner votre select_<colour> une classe commune des cases à cocher, vous permettant de faire $('.colour-select').attr('disabled', true);

Answer 3

pourrait peut-être essayer ceci:

$(document).ready(function(){ 
$("#select_none").click(function() 
{ 
$('#select_blue').attr('disabled', $("#select_none").attr('checked')); 
$('#select_green').attr('disabled', $("#select_none").attr('checked')); 
$('#select_red').attr('disabled', $("#select_none").attr('checked')); 
$('#select_black').attr('disabled', $("#select_none").attr('checked'));  
$('#select_white').attr('disabled', $("#select_none").attr('checked')); 
$('#select_yellow').attr('disabled', $("#select_none").attr('checked')); 
$('#select_pink).attr('disabled', $("#select_none").attr('checked')); 

}); 
}); 

Si cela ne fonctionne pas , vérifiez si select_none est cochée. Si la valeur est true, désactivez toutes les cases, comme vous le faites déjà. Si la valeur est false, supprimez l'attribut 'disabled'.