启用选择选项内的行复选框

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"); 
      } 
     }); 
});