Use radio buttons to disable dropdown using Foreach loop - php

Question

I'm working on an app/form which has a table populated from a database via a foreach loop with radio buttons, one for yes, one for no and a dropdown. I need it so that when the Yes radio button is selected, the dd is disabled, and when no is selected, it is enabled. I have it working, but it only works for the top row, and I can't get all of the Yes radio buttons to be pre-selected. So in short, I can't figure out how to pre-select all of the yes rd btns, which in turn would disable the dd's. Any help would be great. Thanks.
<?php
//Foreach loop iterates through each column of $getallrows function
foreach($allRows as $rowID => $rowInfo){ ?>
<tr>
<td><?php echo $rowInfo['fpID'];?></td>
<td><?php echo $rowInfo['shortTitle'];?></td>
<td><?php echo $rowInfo['PI'];?></td>
<td><?php echo $rowInfo['Department'];?></td>
<td><?php echo $rowInfo['Division'];?></td>
<td><?php echo $rowInfo['sponsorName'];?></td>
<td><?php echo $rowInfo['Date_Project_Start']->format('Y-m-d');?></td>
<td><?php echo $rowInfo['Date_Project_End']->format('Y-m-d');?></td>
<td><?php echo $rowInfo['fundingType'];?></td>
//Radio buttons
<td>Yes<input type="radio" name="rdGrant" value="Yes" id="rdYes" onclick="disable()" checked="checked"/><br />
No<input type="radio" name="rdGrant" value="No" id="rdNo" onclick="enable()"/></td>
<form action="classes/functions.class.php" method="POST">
<input type="hidden" name="id" value="<?php echo $fpID; ?>"/>
<td>
//Drop down
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" name="ddgrantGroup" id="ddgrantType" data-toggle="dropdown">Select Proper Funding Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="ddgrantType">
<li><a data-value="Corporate Sponsor">Corporate Sponsor</a></li>
<li><a data-value="Federal">Federal</a></li>
<li><a data-value="Foundation Selected">Foundation Selected</a></li>
<li><a data-value="Internally Funded">Internally Funded</a></li>
<li><a data-value="State/Local">State/Local</a></li>
</ul>
</div>
</td>
<td>
<div class="update">
<!-- Update and Save -->
<button type="submit" class="btn btn-success" name="Update">Update and Save</button>
</div>
</td>
<td>
<div class="comment">
<textarea class="form-control" aria-label="With textarea" id="grantComment" placeholder="Comments"></textarea>
<button type="submit" class="btn btn-success" name="updateComm">Add Comments</button>
<!-- Add Comment -->
</div>
</td>
</form>
</tr>
<?php } ?>
</tbody>
Function behind the radio buttons disable/enable of the dd.
function disable() {
document.getElementById("ddgrantType").disabled=true;
}function enable() {
document.getElementById("ddgrantType").disabled=false;
}

Answer 1

You have to use a dynamic selector (class/id) for your button instead of constant id #ddgrantType.
Try something like this-
<?php $dynamic_id = 'ddgrantType_'.$rowInfo['fpID'];?>
<td>Yes<input type="radio" name="rdGrant" value="Yes" id="rdYes" onclick="disable('<?php echo $dynamic_id;?>')" checked="checked"/><br />
No<input type="radio" name="rdGrant" value="No" id="rdNo" onclick="enable('<?php echo $dynamic_id;?>')"/></td>
<form action="classes/functions.class.php" method="POST">
<input type="hidden" name="id" value="<?php echo $fpID; ?>"/>
<td>
//Drop down
<div class="dropdown">
<button class="btn btn-secondary btn-sm dropdown-toggle" type="button" name="ddgrantGroup" id="<?php echo $dynamic_id;?>" data-toggle="dropdown">Select Proper Funding Type
<span class="caret"></span>
</button>
<ul class="dropdown-menu" aria-labelledby="ddgrantType">
<li><a data-value="Corporate Sponsor">Corporate Sponsor</a></li>
<li><a data-value="Federal">Federal</a></li>
<li><a data-value="Foundation Selected">Foundation Selected</a></li>
<li><a data-value="Internally Funded">Internally Funded</a></li>
<li><a data-value="State/Local">State/Local</a></li>
</ul>
</div>
</td>
<script>
function disable(btn_id) {
document.getElementById(btn_id).disabled=true;
}
function enable(btn_id) {
document.getElementById(btn_id).disabled=false;
}
</script>