Jquery - trois listes de sélection, désactiver les deux autres si une valeur est sélectionnée

Question

J'ai trois listes de sélection déroulantes, lorsqu'une valeur de l'une des listes est sélectionnée, je veux que les deux autres soient grisées et inactives. J'ai des wrappers autour de chaque liste de sélection que j'expérimente, mais comme je suis nouveau avec jquery, je ne vais pas très loin.

Answer 1

Quelque chose comme cela devrait fonctionner:

$(function() { 
    var $selects = $('#select1, #select2, #select3'); 
    $selects.change(function() { 
    // disabled the other two 
    $selects.not(this).attr('disabled', 'disabled'); 
    }); 
}); 

---

Version mise à jour:

$(function() { 
    var $selects = $('#select1, #select2, #select3'); 
    $selects.change(function() { 
    // disable or enable the other two 
    $selects.not(this).attr('disabled', $(this).val() === '' ? '' : 'disabled'); 
    }); 
}); 

Answer 2

Vous pouvez faire quelque chose comme ceci:

$('#wrappers').change(function(){ 
    $('#select1').attr('disabled', true); 
    $('#select2').attr('disabled', true); 
}); 

Où wrappers est l'id de l'élément de sélection à partir de laquelle lorsque vous choisissez une valeur que les deux autres seront désactivées dont l'id est select1 et select2 respectivement par exemple:

<select id="wrappers">......... 
<select id="select1">......... 
<select id="select2">......... 

Here is working example

Answer 3

Je suppose que vous avez trois, et si l'un des trois sont sele cted, les deux autres devraient désactiver.

function toggleOthers(x) { 
var select = new Array('#wrapper1','#wrapper2','#wrapper3'); 

for (int i = 0; i < select.length; i++) 
    if ($(x).attr('id')!=select[i]) 
     $(x).attr('disabled','disable'); 
} 

HTML: <select onchange='toggleOthers(this);' id='wrapper1'> etc...

Answer 4

si vous avez les sélectionne avec une enveloppe div un identifiant de #wrapp er

$('#wrapper select').each(function(i,select){ 
    $(select).change(function(){ 
     $(this).attr('class','enabled').siblings().attr('class','disabled'); 
    }) 
})