désactiver certaines commandes de sélection de liste déroulante lorsqu'un utilisateur clique sur une case à cocher

Question

J'ai une liste déroulante indiquant l'heure dans un select, minutes dans un autre et AM/PM dans un troisième. J'ai une case à cocher qui dit "Toute la journée"

Je le veux ainsi quand l'utilisateur vérifie "Toute la journée" toutes les listes déroulantes de sélection deviennent désactivées.

Answer 1

Le problème avec les cases est principalement de les amener à travailler en plein IE6, puisque les change événement se déclenche à toutes sortes de temps inutiles.

Commençons par la fonction de faire la invalidantes:

function onCheckChange() { 
    if ($("#all-day-checkbox").is(':checked')) 
    $("select").attr('disabled', 'disabled'); 
    else 
    $("select").removeAttr('disabled'); 
} 

Notez que j'utilise ici juste select qui est certainement plus large que vous ne voulez, mais select.some-class-to-identify-the-hours-and-minutes-and-seconds-dropdowns fonctionnerait aussi bien.

Notez également que la fonction détermine elle-même si la case est cochée, ce qui la rend idempotente: il est possible d'appeler plusieurs fois pendant le processus de vérification d'une boîte.

Maintenant, nous avons juste besoin de lier cette fonction à quelques événements différents:

$("#all-day-checkbox").click(onCheckChange).change(onCheckChange); 
$("label[for=all-day-checkbox]").click(onCheckChange); 

Answer 2

$('#allday').toggle(
    function(){ 
     $('#hour, #minutes, #am-pm').attr('disabled', 'disabled'); 
    }, 
    function(){ 
     $('#hour, #minutes, #am-pm').removeAttr('disabled'); 
    } 
); 

Answer 3

Essayez ceci.

$('#checkbox').change(function(){ 
    $('#Hour, #Minute, #Period').attr('disabled', this.checked);  
});