2

I have three drop down select lists, when a value from one of the list is selected, I want the other two to be greyed out and inactive. I have id wrappers around each select list that I'm experimenting on, but as I am new with jquery I'm not getting very far.

Toxid
  • 615
  • 10
  • 18

4 Answers4

4

Something like this should work:

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

Updated version: 
$(function() {
  var $selects = $('#select1, #select2, #select3');
  $selects.change(function() {
    // disable or enable the other two
    $selects.not(this).attr('disabled', $(this).val() === '' ? '' : 'disabled');
  });
});
jmar777
  • 38,796
  • 11
  • 66
  • 64
  • This is very elegant and easy to understand. Each of the dropdown lists has a "None selected" option. The value there is just "". If you want the other fields to go active again if "None selected" is selected, how would you write it? – Toxid Aug 10 '10 at 23:10
  • Added an updated version that should enable or disable the other two depending on the current value of the select that triggered the change event. Thanks for the accept! – jmar777 Aug 10 '10 at 23:22
  • Simply fantastic! You had one too many = though, should be .val() ==. I take it that's a typo. – Toxid Aug 10 '10 at 23:25
  • That was actually intentional. The triple === means "don't do any type coercion in the comparison", which is pretty important when comparing to string values that may be empty. – jmar777 Aug 11 '10 at 00:03
  • Oh, good to know. Yesterday when I tried with triple, it didn't work. Today it does, I guess I had some kind of browser cache issue. – Toxid Aug 11 '10 at 07:32
  • Strange... not sure why that initially didn't work for you. I was wrapping things up when I commented last night so I commented quickly, but if you were interested in more reading on == vs. ===, here's a previous SO post that sums it up pretty well: http://stackoverflow.com/questions/359494/javascript-vs – jmar777 Aug 11 '10 at 11:37
0

You can do something like this:

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

Where wrappers is the id of select element from which when you choose a value the other two get disabled whose id is select1 and select2 respectively eg:

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

Here is working example

Sarfraz
  • 377,238
  • 77
  • 533
  • 578
0

I assume you have three, and if any of the three are selected, the other two should disable.

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...

Robert
  • 21,110
  • 9
  • 55
  • 65
0

if you have the selects with a div wrapper with an id of #wrapper 

$('#wrapper select').each(function(i,select){
   $(select).change(function(){
        $(this).attr('class','enabled').siblings().attr('class','disabled');
    })
})
mraaroncruz
  • 3,780
  • 2
  • 32
  • 31