Django非表单场景：根据出勤单选状态控制评论输入框禁用

问题分析 #

你需要实现：选中「Present（出勤）」时禁用对应学生的评论输入框，选「Absent（缺勤）」或「Late（迟到）」时启用。之前尝试用Django模板的if语句无效，因为模板仅在后端渲染时生效，无法处理前端单选按钮切换的动态状态，必须结合前端JavaScript实现完整功能。

解决方案步骤 #

1. 修正模板代码（后端渲染初始状态+唯一标识）

首先修改评论框和单选按钮的标识，确保每个学生的控件唯一可区分：

• 评论框的id改为学生唯一标识（避免重复），并默认添加disabled属性（因为默认选中Present）
• 给所有考勤类型单选按钮添加统一类名，方便JS批量监听

修改后的模板代码片段：

<form action="{% url 'attendance:submitAttendance' %}" method="post" name="fullForm">
    {% csrf_token %}

    <table>
        <tr>
            <th>Student Name</th>
            <th>P/A/L</th>
            <th>Comment</th>
        </tr>
        {% for student in list_of_students %}
            <tr>
                <td>{{student}}</td>
                <td>
                    <div class="radio-button">
                        {% for attendanceType in list_of_attendanceTypes %}
                            {% if attendanceType.attendancetype == "Present" %}    
                                <input type="radio" class="attendance-radio" 
                                       name='{{student.ssystudentid}}_attendancetype' 
                                       id='{{student.ssystudentid}}{{attendanceType}}' 
                                       value={{attendanceType.attendancetypeid}} 
                                       checked="checked"
                                       data-student-id="{{student.ssystudentid}}">
                                <label for='{{student.ssystudentid}}{{attendanceType}}'> {{attendanceType}}</label>
                            {% else %}
                                <input type="radio" class="attendance-radio" 
                                       name='{{student.ssystudentid}}_attendancetype' 
                                       id='{{student.ssystudentid}}{{attendanceType}}' 
                                       value={{attendanceType.attendancetypeid}}
                                       data-student-id="{{student.ssystudentid}}">
                                <label for='{{student.ssystudentid}}{{attendanceType}}'> {{attendanceType}}</label>
                            {% endif %}
                        {% endfor %}
                    </div>
                </td>
                <td>
                    <input type="text" name='{{student.ssystudentid}}_comment' 
                           id="comment_{{student.ssystudentid}}" 
                           maxlength="100" 
                           disabled>
                </td>
            </tr>
        {% endfor %}
    </table>
    <input type = "submit" value = "Save Attendance"/>
</form>

2. 添加JavaScript处理动态切换

在页面底部（</body>标签前）添加以下JS代码，监听单选按钮切换事件，动态启用/禁用评论框：

// 监听所有考勤单选按钮的切换事件
document.querySelectorAll('.attendance-radio').forEach(radio => {
    radio.addEventListener('change', function() {
        const studentId = this.dataset.studentId;
        const commentInput = document.getElementById(`comment_${studentId}`);
        // 获取当前选中的考勤类型文本
        const selectedType = this.nextElementSibling.textContent.trim();
        
        // 根据选中类型设置评论框状态
        if (selectedType === 'Present') {
            commentInput.disabled = true;
            // 可选：清空已输入的内容
            commentInput.value = '';
        } else {
            commentInput.disabled = false;
        }
    });
});

关键说明 #

• 模板中默认给评论框加disabled：因为初始状态默认选中Present，确保页面加载时评论框就是禁用状态
• 单选按钮添加data-student-id属性：用于快速关联对应学生的评论框
• JS通过监听change事件实时响应：前端操作必须用JavaScript处理，后端模板无法动态感知用户的单选切换

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