關聯一個複選框與另一個輸入

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>