啓用選擇選項內的行復選框

Question

請幫助我想啓用選擇與複選框，如果在該行中檢查複選框。該代碼僅在第一行內工作，但其餘的不起作用。我的複選框的ID是roomCheck和名稱是chkbox

<table name = "mytab1" id = "MyTable" border = "1"> 
    <tr> 
     <td><input type = "checkbox" name = "chkbox" id = "roomCheck"></td> 
     <td><select id = "number" disabled><option>test</option></select> 
    </tr> 
    <tr> 
     <td><input type = "checkbox" name = "chkbox"></td> 
     <td><select id = "number" disabled><option>test</option></select> 
    </tr> 
    <tr> 
     <td><input type = "checkbox" name = "chkbox" id = "roomCheck"></td> 
     <td><select id = "number" disabled><option>test</option></select> 
    </tr> 
    <tr> 
     <td><input type = "checkbox" name = "chkbox" id = "roomCheck"></td> 
     <td><select id = "number" disabled><option>test</option></select> 
    </tr> 
    <tr> 
     <td><input type = "checkbox" name = "chkbox" id = "roomCheck"></td> 
     <td><select id = "number" disabled><option>test</option></select> 
    </tr> 
    <tr> 
     <td><input type = "checkbox" name = "chkbox" id = "roomCheck"></td> 
     <td><select id = "number" disabled><option>test</option></select> 
    </tr> 
</table> 

<script src="jquery.min.js"></script> 
<script language="JavaScript"> 
          var update = function() { 
          if ($("#roomCheck").is(":checked")) { 
           $('#number').prop('disabled', false); 
          } 
          else { 
           $('#number').prop('disabled', 'disabled'); 
          }  
          }; 
          $(update); 
          $("#roomCheck").change(update); 
         </script> 
</script> 

Answer 1

當您使用選擇與ID，你必須始終給予唯一名稱給每個ID，這是HTML基礎，而這這就是爲什麼它只爲第一行工作，接下來的行爲是不可識別的。

建議閱讀有關jquery selectors.

有很多方法來實現自己的目標，但你必須先改變你的IDS的命名，它們必須是唯一的，或者您可以通過使用類選擇面對這個問題，中其他。

Answer 2

這是我結束了使用固定的問題

$(document).ready(function() { 
     // Disable select elements 
     $('select').each(function() { 
     $(this).attr("disabled","disabled"); 
     }); 

     // Enable them on click 

     $("input[type=checkbox]").click(function(){ 
      if($(this).closest("tr").find("td").children("input[type=checkbox]").prop("checked")) 
      {   
       $(this).closest("tr").find("td").children("select").removeAttr("disabled"); 
      } 
      else 
      { 
       $(this).closest("tr").find("td").children("select").attr("disabled","disabled"); 
      } 
     }); 
});