Radio单选框关联输入框异常：仅激活选中项输入框需求

需求：通过Radio单选框控制，仅使选中项对应的input type text处于激活状态。
目前Checkbox多选框的交互符合预期：可勾选多个复选框来激活对应输入框。但基于此逻辑实现的Radio单选框交互异常：首次选中单选框后，对应输入框始终处于激活状态，无法实现仅当前选中项输入框激活、其余禁用的效果。

正常工作的Checkbox代码 #

<script>
function disable(checkbox,form){
    if(document.getElementById(checkbox).checked == true){
        document.getElementById(form).disabled = false
    }else{
        document.getElementById(form).disabled = true
    }
}
</script>
<label>Name:<br><input type="checkbox" id="chbx_name" onclick="disable('chbx_name','name')"><input type='text' id="name" name="name" value='<?php echo $row['name'] ?>' disabled></label>
<label>Data:<br><input type="checkbox" id="chbx_data" onclick="disable('chbx_data','data')"><input type='date' id="data" name="data" value='<?php echo $row['data'] ?>' disabled>
</label>
<label>Hour:<br><input type="checkbox" id="chbx_hour" onclick="disable('chbx_hour','hour')"><input type='time' id="hour" name="hour" value='<?php echo $row['hour'] ?>' disabled>
</label>

异常的Radio单选框代码 #

<script>
    function disable(radio,form){
        if(document.getElementById(radio).checked == true){
                    document.getElementById(form).disabled = false
        }else{
            document.getElementById(form).disabled = true
        }
    }
</script>
<?php
    $result = $mysqli->query("SELECT picture_name FROM film_pictures WHERE IDpicture = ".$id);
    while($row=$result->fetch_array()){
            $i=0;
            $i++;
                ?><label><input type="radio" id="radio_picture_name<?php echo $i ?>" onclick="disable('radio_picture_name<?php echo $i ?>','picture_name<?php echo $i ?>')"><input type="text" id="picture_name<?php echo $i ?>"  name="picture_name" value="<?php echo $row['picture_name'] ?>" style="width:450px" ></label>
<?php } ?>

问题分析与修复 #

核心问题 #

1. Radio互斥逻辑未适配：Checkbox是独立开关，但Radio属于同一组互斥选择。当前函数只处理被点击Radio的输入框，未同步禁用同组其他Radio对应的输入框。
2. ID重复bug：$i=0;写在循环内部，导致每次循环都重置计数器，所有Radio和输入框的ID都会重复，JS操作会出现混乱。

修复后的代码 #

<script>
function handleRadioSelection(selectedInputId) {
    // 先禁用所有同组的文本输入框
    const allTextInputs = document.querySelectorAll('input[name="picture_name"]');
    allTextInputs.forEach(input => input.disabled = true);
    // 再激活当前选中项的输入框
    document.getElementById(selectedInputId).disabled = false;
}
</script>
<?php
    $result = $mysqli->query("SELECT picture_name FROM film_pictures WHERE IDpicture = ".$id);
    $i = 0; // 计数器初始化移到循环外，保证ID唯一
    while($row=$result->fetch_array()){
        $i++;
?>
<label>
    <input type="radio" name="picture_radio_group" onclick="handleRadioSelection('picture_name<?php echo $i ?>')">
    <input type="text" id="picture_name<?php echo $i ?>" name="picture_name" value="<?php echo $row['picture_name'] ?>" style="width:450px" disabled>
</label>
<?php } ?>

关键修改说明 #

• 将计数器$i的初始化移到循环外部，确保每个元素拥有唯一ID。
• 重构JS函数：先批量禁用同组所有文本输入框，再单独激活当前选中项的输入框，适配Radio互斥特性。
• 给Radio按钮设置统一的分组name（picture_radio_group），避免与文本输入框的name冲突，保证表单提交逻辑正常。
• 默认让所有文本输入框处于disabled状态，符合单选框初始无选中项的逻辑。

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