基于表格行单选按钮选择启用/禁用右侧文本框的技术需求及代码求助

Alright, let's figure out how to make this work smoothly. The key here is to link each row's "Extra KM/Hr?" radio buttons only to the input fields in the same row that come after them—we don't want changing one row's radio to mess up another. Here's a straightforward, robust solution that plays nicely with your PHP-generated table:

Step 1: Adjust Your PHP Table Generation #

First, when building each row in PHP, add consistent classes to the radio buttons and dependent input fields. Also, ensure each row's radio button group has a unique name so they don't interfere with each other. Here's what that might look like:

<tbody id="displayTable">
    <?php 
    // Assume $tableData is your dataset from the database
    foreach ($tableData as $rowIndex => $row): 
    ?>
    <tr>
        <!-- Other columns go here -->
        <td class="extra-km-column">
            <!-- Unique name per row to keep radio groups independent -->
            <input type="radio" name="extra_km_<?= $rowIndex ?>" value="Yes" class="extra-toggle-radio"> Yes
            <input type="radio" name="extra_km_<?= $rowIndex ?>" value="No" class="extra-toggle-radio" checked> No
        </td>
        <!-- Dependent input fields - add the extra-dependent class -->
        <td><input type="number" class="extra-dependent" disabled></td>
        <td><input type="text" class="extra-dependent" disabled></td>
        <td><input type="date" class="extra-dependent" disabled></td>
        <!-- Add more dependent fields as needed -->
    </tr>
    <?php endforeach; ?>
</tbody>

Step 2: Add the JavaScript Logic #

We'll use vanilla JavaScript (no frameworks needed) to listen for radio button changes and toggle the dependent inputs. This code waits for the page to fully load before attaching event listeners, so it won't miss any elements generated by PHP:

document.addEventListener('DOMContentLoaded', function() {
    // Grab all the radio buttons we care about
    const toggleRadios = document.querySelectorAll('.extra-toggle-radio');

    toggleRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            // Find the parent row of the clicked radio button
            const currentRow = this.closest('tr');
            // Get all dependent inputs in this row
            const dependentInputs = currentRow.querySelectorAll('.extra-dependent');

            // Enable inputs if "Yes" is selected, disable if "No"
            const shouldEnable = this.value === 'Yes';
            dependentInputs.forEach(input => {
                input.disabled = !shouldEnable;
                // Optional: Clear the input when disabling, if needed
                // if (!shouldEnable) input.value = '';
            });
        });
    });
});

How This Works #

• Row Isolation: Using closest('tr') ensures we only affect inputs in the same row as the radio button that was changed—no cross-row interference.
• Class-Based Targeting: The extra-toggle-radio and extra-dependent classes make it easy to select exactly the elements we need, even if your table structure changes later.
• Initial State: We set the dependent inputs to disabled by default in the PHP code, matching the default "No" selection.

Quick Notes #

• Make sure each row's radio button group has a unique name attribute (we used $rowIndex here) so selecting a radio in one row doesn't deselect another.
• If you want users to see the inputs but not edit them (instead of graying them out), replace disabled with readonly—just note that readonly inputs still get submitted with the form, while disabled ones don't.
• Test it out! When you select "Yes" in any row, the inputs to the right should become editable; selecting "No" will lock them back up.

内容的提问来源于stack exchange，提问作者MyVision