如果已在任何其他选择元素中选择了某个选项,我将尝试禁用该选项,如果未选中则重新启用它。
当我预选选项时,此功能无法正常工作(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>