PHP网格视图中点击单选按钮启用输入框的实现方案

这问题在动态生成表单行的场景里很常见，核心是让每个单选按钮能精准定位到它对应的输入框就行。下面给你两种可行的实现方式，原生JS和jQuery版的，你可以根据项目情况选：

第一步：调整PHP生成的HTML结构 #

首先得给动态生成的单选按钮和输入框加上统一的类名，同时保证单选按钮是同一组（name属性相同），这样同一时间只能选中一个：

<?php
// 假设$db_rows是你从数据库获取的数据集，最多取10行
$db_rows = []; // 替换成你的数据库查询结果
$max_rows = min(count($db_rows), 10);

for ($i = 0; $i < $max_rows; $i++) {
    $row_data = $db_rows[$i];
    // 默认选中第一行的话，这里加checked属性
    $is_checked = ($i === 0) ? 'checked' : '';
    // 默认选中的行，输入框不禁用
    $input_disabled = ($i !== 0) ? 'disabled' : '';
?>
<tr class="data-row">
    <td>
        <input type="radio" name="selected_row" class="row-radio" <?php echo $is_checked; ?> value="<?php echo $row_data['id']; ?>">
    </td>
    <td>
        <input type="text" class="row-input" <?php echo $input_disabled; ?> value="<?php echo htmlspecialchars($row_data['content']); ?>">
    </td>
</tr>
<?php } ?>

第二步：编写JavaScript逻辑 #

方案一：原生JavaScript（无需依赖库） #

这种方式适合不想引入jQuery的项目，兼容性也很好：

// 页面加载完成后执行
document.addEventListener('DOMContentLoaded', function() {
    // 获取所有单选按钮
    const allRadios = document.querySelectorAll('.row-radio');
    
    // 给每个单选按钮绑定change事件
    allRadios.forEach(radio => {
        radio.addEventListener('change', function() {
            // 先把所有输入框设为禁用状态
            document.querySelectorAll('.row-input').forEach(input => {
                input.disabled = true;
            });
            
            // 如果当前单选按钮被选中，找到对应行的输入框并启用
            if (this.checked) {
                // 通过closest找到当前单选所在的<tr>，再找里面的输入框
                const targetInput = this.closest('.data-row').querySelector('.row-input');
                if (targetInput) {
                    targetInput.disabled = false;
                    // 可选：自动聚焦到输入框，提升用户体验
                    targetInput.focus();
                }
            }
        });
    });
});

方案二：jQuery版本（如果项目已经引入jQuery） #

代码更简洁，适合已经用jQuery的项目：

$(document).ready(function() {
    // 监听单选按钮的change事件
    $('.row-radio').on('change', function() {
        // 先禁用所有输入框
        $('.row-input').prop('disabled', true);
        
        // 启用当前选中行的输入框
        if ($(this).is(':checked')) {
            $(this).closest('.data-row').find('.row-input').prop('disabled', false).focus();
        }
    });
});

核心逻辑说明 #

• 类名关联：通过给单选按钮和输入框加统一类名，再利用DOM层级关系（closest找父级行），避免用固定ID（动态行的ID不好维护）。
• 单选组控制：同一组单选按钮name属性相同，保证用户只能选中一行，同时我们在事件里先禁用所有输入框，再启用选中行的，确保状态一致。
• 初始状态处理：如果需要默认选中某一行，直接在PHP生成时给对应单选按钮加checked，输入框去掉disabled，这样页面加载时就能正常显示。

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