jQuery - désactive les options sélectionnées

Vous devez désactiver les options déjà sélectionnées dans la boîte de sélection en utilisant jQuery. Je voudrais qu'il grise comme asmselect.jQuery - désactive les options sélectionnées

Testez mon exemple here.

//JS 
$("#theSelect").change(function(){   
    var value = $("#theSelect option:selected").val(); 
    var theDiv = $(".is" + value); 

    theDiv.slideDown().removeClass("hidden"); 
}); 


$("div a.remove").click(function() {  
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
}); 

//HTML 
<body> 
<div class="selectContainer"> 
    <select id="theSelect"> 
     <option value="">- Select -</option> 
     <option value="Patient">Patient</option> 
     <option value="Physician">Physician</option> 
     <option value="Nurse">Nurse</option> 
    </select> 
</div> 
<div class="hidden isPatient">Patient <a href="#" class="remove" rel="Patient">remove</a></div> 
<div class="hidden isPhysician">Physician <a href="#" class="remove" rel="Patient">remove</a></div> 
<div class="hidden isNurse">Nurse <a href="#" class="remove" rel="Patient">remove</a></div> 
</body>

MISE À JOUR: Voici le finished solution. Merci à Patrick et Simen.

Source

2010-05-19 Jeffrey

Ajouter cette ligne à votre gestionnaire d'événements change

$("#theSelect option:selected").attr('disabled','disabled') 
     .siblings().removeAttr('disabled');

Cela désactive l'option sélectionnée et activer des options désactivées précédemment.

EDIT:

Si vous ne voulez pas réactiver les précédentes, supprimez cette partie de la ligne:

 .siblings().removeAttr('disabled');

EDIT:

http://jsfiddle.net/pd5Nk/1/

Pour réactiver lorsque vous cliquez sur supprimer, ajoutez cela à votre gestionnaire de clic.

$("#theSelect option[value=" + value + "]").removeAttr('disabled');

Source

2010-05-19 16:21:50 user113716

Mise à jour de ma réponse pour réactiver l'option appropriée lorsque vous cliquez sur "Supprimer". – user113716

cela fonctionne aussi très bien, merci. Y at-il un inconvénient à utiliser find et data comme dans l'exemple de Simen? – Jeffrey

Moins de code et moins de consommation de mémoire (pas d'utilisation de données()) que ma réponse :) N'oubliez pas de mettre à jour les balises 'rel' des liens dans le code original, car ils pointent tous vers Patient –

Cela semble fonctionner:

$("#theSelect").change(function(){   
    var value = $("#theSelect option:selected").val(); 
    var theDiv = $(".is" + value); 

    theDiv.slideDown().removeClass("hidden"); 
    //Add this... 
    $("#theSelect option:selected").attr('disabled', 'disabled'); 
}); 


$("div a.remove").click(function() {  
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
    //...and this. 
    $("#theSelect option:disabled").removeAttr('disabled'); 
});

Source

2010-05-19 16:21:09 jeanreis

même problème que la première tentative de Patrick. l'activation sur le clic de suppression renouvelle toutes les options désactivées. – Jeffrey

Cela désactivera/activera les options lorsque vous les sélectionnez/les supprimez, respectivement.

$("#theSelect").change(function(){   
    var value = $(this).val(); 
    if (value === '') return; 
    var theDiv = $(".is" + value); 

    var option = $("option[value='" + value + "']", this); 
    option.attr("disabled","disabled"); 

    theDiv.slideDown().removeClass("hidden"); 
    theDiv.find('a').data("option",option); 
}); 


$("div a.remove").click(function() {  
    $(this).parent().slideUp(function() { $(this).addClass("hidden"); }); 
    $(this).data("option").removeAttr('disabled'); 
});

Démo: http://jsfiddle.net/AaXkd/

Source

2010-05-19 16:50:52

génial cela fonctionne, mais j'ai besoin d'un ajout de plus. peut-il également rester sur le titre -select- et ne pas afficher la dernière option sélectionnée? – Jeffrey

Ajoutez '$ (this) .val ('');' à la fin de la fonction 'change'. –

fonctionne très bien, grazie! – Jeffrey

pls essayer ceci,

$('#select_id option[value="'+value+'"]').attr("disabled", true);

Source

2016-12-06 17:10:46

jQuery - désactive les options sélectionnées

Répondre

Questions connexes