Связать флажок с другим вводом

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>