他の選択要素のいずれかで選択されている場合はオプションを無効にし、選択されていない場合は再度有効にしようとしています。
options を事前に選択すると、この関数は正しく機能せず(selected="selected")
、すべての選択要素の中で一度に 1 つのオプションに対してのみ機能します。事前に選択されたオプションと、すべての要素のすべてのオプションで機能するように変更するにはどうすればよいですか?
ここに事前に選択されたオプションなしで関数のフィドルを投稿しました: 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>