【发布时间】：2018-06-14 14:50:16
【问题描述】：
我正在使用 Java servlet 和 JSP 创建一个 Web 应用程序。我有一张包含歌曲的表格。每首歌都有自己的复选框和下拉菜单。像这样：
您可以看到已录制歌曲的复选框和下拉菜单被禁用，这就是我想要的。
我想要的是当页面加载时所有下拉菜单都将被禁用，当我选中一个可用复选框时，同一行中的下拉菜单将被启用，当我取消选中该复选框时，下拉菜单将再次被禁用。
JSP 代码如下：
<table id="myTable">
<tr>
<th>Songs</th>
<th>Selected</th>
<th>#</th>
<th>Available/Taken</th>
</tr>
<c:forEach items="${Entities}" varStatus="loop">
<tr>
<td><c:out value="${Entities[loop.index]}"/></td>
<td><input id="checkbox1" type="checkbox" name="selected" value=" ${Entities[loop.index]}" ${checkboxDis[loop.index]} ><br></td>
<td>
<select name="myselect" id="drop" disabled >
<option selected disabled>#</option>
<option>Cmaj</option><option>Gmaj</option>
<option>Dmaj</option><option>Amaj</option>
<option>Emaj</option><option>Bmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>Gb_maj</option>
<option>Amin</option><option>Emin</option>
<option>Bmin</option><option>F#min</option>
<option>C#_min</option><option>G#_min</option>
<option>D#_min</option><option>Cb_maj</option>
<option>Gmaj</option><option>Dmaj</option>
<option>F#maj</option><option>Cmaj</option>
<option>Fmaj</option><option>Bb_maj</option>
<option>Eb_maj</option><option>Ab_maj</option>
<option>Db_maj</option><option>A#</option>
</select>
</td>
<td>
<c:choose>
<c:when test="${checkboxDis[loop.index].equals('disabled')}">
<i class="fa fa-ban" style="color:red;"></i>
</c:when>
<c:when test="${checkboxDis[loop.index].equals('')}">
<i class="fa fa-check-circle" style="color:green;"></i>
</c:when>
</c:choose>
</td>
</tr>
</c:forEach>
</table>
到目前为止我完成的 jQuery 代码：
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
$('#drop')[i].prop("disabled", false);
}
}
} else {
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
$('#drop')[i].prop("disabled", true);
}
}
}
});
});
代码不起作用，因为我不知道如何处理下拉菜单，因为它们具有相同的名称和 ID。
【问题讨论】：
-
“因为它们具有相同的名称和 ID” - 相同的 ID 绝不是您希望在 HTML 中拥有的东西。要么给每一行下拉菜单一个唯一的 ID，要么完全删除这些 ID。
-
请将 JSP 代码添加为文本而不是图像，以便我可以复制粘贴它并向您展示如何为您的下拉菜单创建唯一 ID。
-
我建议不要使用不同的 id 将其更改为类。根据上下文，每行会有一个 drop 类。
-
@Taplar 甚至没有必要。 jQuery 可以轻松导航到同级单元格
标签： javascript jquery jsp jstl