選中/取消選中復選框時啟用/禁用下拉菜單

Question

我正在使用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。

Answer 1

您的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> 

Answer 2

將您的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>

現在，您的復選框和下拉列表具有對應的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);
        }
      }
      */
    }
  });
});