我在五行中有10个下拉列表选择字段!如果有人从第一个或第二个选择中选择了某个内容,那么我想禁用 同一行中的另一个(不要只消失禁用)!
当我选择启用值时,应启用禁用选择!
对不起我的英文,我希望你理解我的问题! 提前谢谢!!
<table>
<tr>
<th>
First select
</th>
<th>
Second select
</th>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
</table>
&#13;
答案 0 :(得分:6)
您可以使用此代码段:
$('select').change(function(){
$(this).closest('tr').find('select').not(this).prop('disabled', this.value !== "enable")
});
答案 1 :(得分:1)
这会有所帮助:
$("select").on("change", function(){
$(this).closest("td").siblings("td").find("select").attr("disabled",true);
if($(this).val()=="enable") {
$(this).closest("td").siblings("td").find("select").attr("disabled",false);
}
});
答案 2 :(得分:0)
$('select').change(function() {
if($(this).val()!='enable') {
$(this).parent().siblings().children('select').prop('disabled',true);
}
else {
$(this).parent().siblings().children('select').prop('disabled',false);
}
});
答案 3 :(得分:0)
我认为这就是答案,你在寻找什么。我想你可以 简化更多。但无论如何你都有了这个主意。
HTML -
<table id='myTable'>
<tr>
<th>
First select
</th>
<th>
Second select
</th>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
<tr>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
<td>
<select>
<option value="enable">Enable</option>
<option value="test2">Test 2</option>
<option value="test3">Test 3</option>
<option value="test4">Test 4</option>
</select>
</td>
</tr>
</table>
Javascript -
var items = $('#myTable select').on('change', function() {
var index = items.index(this);
var selectArray = $('select');
if(index === 0 || index === 2 || index === 4 || index === 6 || index === 8) {
console.log(index);
$(selectArray[index + 1]).attr('disabled', true);
} else if (index === 1 || index === 3 || index === 5 || index === 7 || index === 9) {
console.log(index);
$(selectArray[index - 1]).attr('disabled', true);
}
});
JSFiddle Link - https://jsfiddle.net/nzlorca/51fevoam/