如果在多个框中选中，则禁用jQuery 选项

我有一个问题类似于这里提出的问题： 如果在其他中选择了jQuery 选项，则禁用该选项

但是，我的不同之处在于将有两个以上的选择框。 在提供的答案中，当选择一个选项时，在其他选择框（我想要发生）中将其设置为禁用，但我不希望在其他选择框中选择的任何其他选项已禁用删除。

那有意义吗？

示例html：

  No Match Test Test 2 Test 3  
 
  No Match Test Test 2 Test 3  
 
  No Match Test Test 2 Test 3   

和jQuery：

 $('select[name*="homepage_select"]').change(function() { var value = $(this).val(); alert(value); $('select[name*="homepage_select"]').children('option').each(function(){ if ( $(this).val() === value ) { $(this).attr('disabled', true)//.siblings().removeAttr('disabled'); } }); }); 

注释掉.siblings().removeAttr('disabled')只是永远不会删除已禁用的属性…但是，如果未在任何一个选择框中选择它，我只想删除它。

基本上，我只希望一次在一个选项中选择一个选项。 我认为如果我只能对刚刚更改的项目进行.removeAttr('disabled') ，我认为这样可行。 但是，我不知道该怎么做。

有没有人有任何想法？

谢谢！

Answer 1

这应该做到这一点。 基本上是您的评论所要求的 – 确保所有3个选项都有唯一的选择。 在1个selext框中进行选择后，其他选项将不再可用。

 $('select[name*="homepage_select"]').change(function(){ // start by setting everything to enabled $('select[name*="homepage_select"] option').attr('disabled',false); // loop each select and set the selected value to disabled in all other selects $('select[name*="homepage_select"]').each(function(){ var $this = $(this); $('select[name*="homepage_select"]').not($this).find('option').each(function(){ if($(this).attr('value') == $this.val()) $(this).attr('disabled',true); }); }); }); 

实例： http ： //jsfiddle.net/QKy4Y/

Answer 2

你可以这样做：

 
  No Match Test Test 2 Test 3  
 
  No Match Test Test 2 Test 3  
 
  No Match Test Test 2 Test 3  
 $('select[name*="homepage_select"]').change(function() { var selectedOptions = $('select option:selected'); $('select option').removeAttr('disabled'); selectedOptions.each(function() { var value = this.value; if (value != ''){ var id = $(this).parent('select').attr('id'); var options = $('select:not(#' + id + ') option[value=' + value + ']'); options.attr('disabled', 'true'); } }); }); 

在这里小提琴： http ： //jsfiddle.net/8AcN4/2/