Comment désactiver toutes les options de tous les menus ayant la même valeur jQuery

Question

J'ai un formulaire où j'ai plusieurs menus déroulants sur la même page. Tous ces menus ont le même nom de classe (ie .clientMenu). Tous les menus ont les mêmes options exactes (bleu, jaune, blanc, noir et vert). Mon but est de désactiver toute la valeur de tous les menus une fois qu'une valeur est sélectionnée.

Si j'ai 10 menus, alors si l'utilisateur sélectionne "bleu" sur n'importe quel menu alors "bleu" devrait être désactivé des 9 autres menus. Par conséquent, "bleu" peut être sélectionné dans un seul menu.

C'est ce que j'ai essayé mais ne fonctionne pas. Quand je dis que ça ne marche pas, je veux dire que ça ne désactive aucune option.

Comment puis-je faire fonctionner ce code?

Merci un groupe à l'avance

$('.clientMenu').change(function(){ 

    $(".clientMenu option").each(function(){ 

     if($(this).val() == $(".clientMenu").val()) 
      $(this).prop('disabled', true); 
     else 
      $(this).prop('disabled', false); 

    }); 
}); 

ÉDITÉ J'ai créé un jsFiddle pour rendre les choses plus faciles http://jsfiddle.net/24yhT/4/

Answer 1

je peux certainement le rendre plus court, ne sais pas pourquoi le vôtre ne fonctionnerait pas si

function setOptionsDisabled($parent, val, disabled) { 
    $parent.find('option[value="' + val + '"]').prop('disabled', disabled); 
    $parent.find('option[value="0"]').prop('disabled', false); 
} 
$('.clientMenu').change(function(){ 
    $others = $('.clientMenu').not(this); 
    setOptionsDisabled($others, $(this).val(), true); 
    setOptionsDisabled($others, $(this).data('val'), false); 
    $(this).data('val', $(this).val()); 
}); 

http://jsfiddle.net/24yhT/24/

Answer 2

Le problème est lorsque vous marquez l'élément comme désactivé dans le premier select, $(".clientMenu").val() devient null (éléments désactivés ne sont pas considérés comme des sélections valides, vous perdez la valeur). Les itérations suivantes ne correspondent jamais à la valeur et les option ne sont jamais désactivées. Une option consiste à stocker la valeur de la liste déroulante modifiée dans une variable (var val = $(this).val()) avant de faire défiler les options et de les comparer à la place. Êtes-vous sûr de ne pas vouloir désactiver la valeur dans les listes déroulantes autres? À l'heure actuelle, votre code désactive également cette option dans la liste déroulante des modifications. Vous devriez probablement filtrer comme ceci $(".clientMenu").not(this).find("option")....