关联一个复选框与另一个输入

Question

我正在尝试做一些事情。我有下面的代码片段：

echo "<form class='additionals'>";    
foreach($connection->query($sql2) as $additional) 
{ 
    echo "<input class='additional-checkbox' type='checkbox' name='additional_id' 
      value='{$additional['additional_id']}'/> 
     {$additional['additional_name']} - &#36;{$additional['additional_price']} 
     <input type='number' name='additional_quantity' value='1' min='1' max='5'/> 
     <br/>"; 
} 
echo "</form>"; 

时不会检查与名称additional_id任何复选框，我需要的是，与有关其数量的名字additional_quantity在它前面输入被禁用，反之亦然。但我不知道该怎么做，甚至更多，因为我需要使用foreach。我可以用jQuery来做到这一点吗？

Answer 1

这将你需要的东西：

• 注意，我给复选框类enable
• 我还添加了disabled财产实际HTML的输入，你需要在添加此你的PHP代码
• 我也给每一个输入一个独特的name如果你允许多个领域，将提交表单，他们都将需要唯一的名称

$('.enable').change(function(){ 
 
    var set = $(this).is(':checked') ? false : true;  // ternary operator to test if the changed checkbox is now checked 
 
    $(this).nextAll('input').first().attr('disabled',set); // find the next input and set it's disabled property according to the previous check 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class='additionals'> 
 
    <input class='additional-checkbox enable' type='checkbox' name='additional_id1' value='somevalue' />somevalue 
 
    <input type='number' name='additional_quantity1' value='1' min='1' max='5' disabled/> 
 
    <br/> 
 
    <input class='additional-checkbox enable' type='checkbox' name='additional_id2' value='somevalue' />somevalue 
 
    <input type='number' name='additional_quantity2' value='1' min='1' max='5' disabled/> 
 
    <br/> 
 
    <input class='additional-checkbox enable' type='checkbox' name='additional_id3' value='somevalue' />somevalue 
 
    <input type='number' name='additional_quantity3' value='1' min='1' max='5' disabled/> 
 
    <br/> 
 
    <input class='additional-checkbox enable' type='checkbox' name='additional_id4' value='somevalue' />somevalue 
 
    <input type='number' name='additional_quantity4' value='1' min='1' max='5' disabled/> 
 
    <br/> 
 
    <input class='additional-checkbox enable' type='checkbox' name='additional_id5' value='somevalue' />somevalue 
 
    <input type='number' name='additional_quantity5' value='1' min='1' max='5' disabled/> 
 
    <br/> 
 
</form>