如何将RadioButtonFor值传递给onclick方法及动态启用文本框

我来给你梳理一下实现思路和具体代码，这样就能完美实现你要的效果啦！核心思路是：先把补充信息的文本框默认设为禁用状态，然后监听RadioButton的点击事件，判断选中的选项ID是否为4，再动态切换文本框的启用/禁用状态。

第一步：修改Razor视图代码 #

首先，我们需要完善RadioButton的渲染逻辑，同时添加默认禁用的文本框：

@for (int i = 0; i < Model.DemoQ1Answers.Count(); i++) {
    <div class="col-md-4">
        @* 给单选框添加点击事件，传递当前选中的AnswerID *@
        @Html.RadioButtonFor(m => m.selectedAnswerIDforQ1, Model.DemoQ1Answers[i].AnswerID, new { 
            @class = "q1-option-radio",
            @onclick = "toggleOtherInput(this.value)"
        })
        @* 绑定选项文本的标签 *@
        @Html.LabelFor(m => m.selectedAnswerIDforQ1, Model.DemoQ1Answers[i].AnswerText)
    </div>
}

<!-- 补充信息文本框：默认禁用，绑定Model的OtherAnswerText属性（需要你在Model里定义这个属性哦） -->
<div class="mt-3">
    @Html.TextBoxFor(m => m.OtherAnswerText, new { 
        @id = "other-info-input",
        @disabled = "disabled",
        @class = "form-control",
        @placeholder = "请输入补充信息"
    })
</div>

第二步：添加JavaScript逻辑 #

接下来写处理点击事件的JS函数，你可以把这段代码放在视图底部或者单独的JS文件里：

function toggleOtherInput(selectedAnswerId) {
    const otherInput = document.getElementById('other-info-input');
    
    // 判断选中的是否是AnswerID为4的"其他"选项
    if (selectedAnswerId === '4') {
        // 启用文本框，还可以自动聚焦提升用户体验
        otherInput.removeAttribute('disabled');
        otherInput.focus();
    } else {
        // 禁用文本框，同时清空之前输入的内容（可选，根据需求调整）
        otherInput.setAttribute('disabled', 'disabled');
        otherInput.value = '';
    }
}

额外优化（如果项目用了jQuery） #

如果你的项目已经引入了jQuery，也可以用更简洁的写法：

$(function() {
    // 监听所有Q1单选框的点击事件
    $('.q1-option-radio').on('click', function() {
        const isOtherSelected = $(this).val() === '4';
        // 切换文本框的禁用状态
        $('#other-info-input').prop('disabled', !isOtherSelected);
        
        if (isOtherSelected) {
            $('#other-info-input').focus();
        } else {
            $('#other-info-input').val('');
        }
    });
});

注意事项 #

• 确保你的Model里定义了OtherAnswerText属性，这样提交表单时才能获取到用户输入的补充信息；
• 如果页面加载时默认选中了某个选项，记得在页面初始化时调用一次toggleOtherInput函数，避免状态不一致；

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