Question

如果在任何其他选择元素中选择了选项，我会尝试禁用该选项，如果未选中，则重新启用它。

当我预选选项(selected="selected")时，此功能无法正常工作，并且仅适用于所有选择元素中的一个选项。如何修改它以使用预先选择的选项以及所有元素中的所有选项？

我在这里发布了一个没有任何预选选项的函数的小提琴：http://jsfiddle.net/dZqEu/927/

JS

$('.rank_options').change(function() { 
    $('#priority1, #priority2, #priority3, #priority4, #priority5').not(this)
    .children('option[value=' + this.value + ']')
    .attr('disabled', true)
    .siblings().removeAttr('disabled');    
});

HTML

<tr >        
<td><select name=priority1 id="priority1" class="rank_options" >
    <option selected="selected" value="Test 1">Test 1</option> 
    <option value="Test 2">Test 2</option> 
    <option value="Test 3">Test 3</option> 
    <option value="Test 4">Test 4</option> 
    <option value="Test 5">Test 5</option></select> 
</td>
<td ><select name=priority2 id="priority2" class="rank_options" >
    <option value="Test 1">Test 1</option> 
    <option selected="selected" value="Test 2">Test 2</option> 
    <option value="Test 3">Test 3</option> 
    <option value="Test 4">Test 4</option> 
    <option value="Test 5">Test 5</option></select>  
</td>
<td><select name=priority3 id="priority3" class="rank_options" >
    <option value="Test 1">Test 1</option> 
    <option value="Test 2">Test 2</option> 
    <option selected="selected" value="Test 3">Test 3</option> 
    <option value="Test 4">Test 4</option> 
    <option value="Test 5">Test 5</option></select> 
</td>
<td><select name=priority4 id="priority4" class="rank_options" >
    <option value="Test 1">Test 1</option> 
    <option value="Test 2">Test 2</option> 
    <option value="Test 3">Test 3</option> 
    <option selected="selected" value="Test 4">Test 4</option> 
    <option value="Test 5">Test 5</option></select>                          
</td>
<td><select name=priority5 id="priority5" class="rank_options" >
    <option value="Test 1">Test 1</option> 
    <option value="Test 2">Test 2</option> 
    <option value="Test 3">Test 3</option> 
    <option value="Test 4">Test 4</option> 
    <option selected="selected" value="Test 5">Test 5</option></select> 
</td>       
</tr>

Answer 1

这样的东西？

$(document).ready(function(){
$('select option[value="Test 1"]').attr('disabled',true);
});
$('.rank_options').change(function () {
  $('#priority1, #priority2, #priority3, #priority4, #priority5').
  find('option:selected').each(function(){
   $("#priority1, #priority2, #priority3, #priority4, #priority5").find("option[value="+this.value+"]").attr('disabled', true);
   });
});

DEMO VIEW

禁用在其他元素中选择的所有选项

1 个答案: