[英]Enable/disable dropdowns when checkbox checked/unchecked
I'm creating a web app using Java servlets and JSP. 我正在使用Java Servlet和JSP创建一个Web应用程序。 I have a table which contains songs. 我有一张桌子,里面放着歌。 Every song has its own checkbox and drop-down. 每首歌曲都有自己的复选框和下拉菜单。 like this: 像这样:
You can see that taken songs have their checkbox and drop-down disabled and that's how I want it. 您会看到所拍摄的歌曲禁用了复选框和下拉菜单,这就是我想要的方式。
What I want is when the page loads all the drop-downs will be disabled, and when I check one of the available checkboxes the drop-down that is in the same line will be enabled and when I uncheck that checkbox the dropdown will be disabled again. 我想要的是在页面加载所有下拉列表时都将被禁用,并且当我选中可用复选框之一时,将启用同一行中的下拉列表,而当我取消选中该复选框时,将禁用下拉列表再次。
Here is the JSP code: 这是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>
The jQuery code I've done so far: 到目前为止,我已经完成了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);
}
}
}
});
});
The code isn't working because I don't know how to handle the drop-downs since they have the same names and ids. 该代码无法正常工作,因为我不知道如何处理下拉菜单,因为它们具有相同的名称和ID。
Your IDs need to be unique - in this case not needed at all for enabling the select 您的ID必须是唯一的-在这种情况下,启用选择功能完全不需要
$(function() { $("input[type='checkbox']").on('change', function() { $(this).closest("tr").find("select[name=myselect]").prop("disabled", !this.checked) }); });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tr> <td><input id="checkbox_1" type="checkbox" name="selected" value="1"></td> <td> <select name="myselect" id="drop_1" 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> </tr> <tr> <td><input id="checkbox_2" type="checkbox" name="selected" value="2"></td> <td> <select name="myselect" id="drop_2" 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> </tr> </table>
Change your JSP to this: 将您的JSP更改为此:
<td><input id="checkbox_${checkboxDis[loop.index]}" type="checkbox" name="selected" value="${Entities[loop.index]}"><br></td>
<td>
<select name="myselect" id="drop_${checkboxDis[loop.index]}" 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>
Now your checkboxes and dropdowns have corresponding IDs which you can then use with jQuery: 现在,您的复选框和下拉列表具有对应的ID,您可以将其与jQuery一起使用:
var selected1 = new Array();
$(document).ready(function() {
$("input[type='checkbox']").on('change', function() {
if ($(this).is(":checked")) {
selected1.push($(this).val());
$('#drop_' + $(this).val()).prop("disabled", false);
} else {
$('#drop_' + $(this).val()).prop("disabled", true);
// Instead of a for-loop for removing the unchecked song,
// you can also use Array.filter():
selected1 = selected1.filter(song_id => song_id !== $(this).val());
/*
for (var i = 0; i < selected1.length; i++) {
if (selected1[i] == $(this).val()) {
selected1.splice(i, 1);
}
}
*/
}
});
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.