如何通过AJAX获取数据库ID激活Jinja生成的复选框？

我正在开发首个Web项目，遇到以下问题：通过Jinja循环生成带唯一ID的复选框，期望借助jQuery的AJAX从数据库获取ID列表并勾选对应复选框，但Jinja与jQuery交互异常，导致复选框ID无法正常触发勾选。

现有代码 #

1. jQuery代码 #

$(document).ready(function () {
    $("#selectAll").click(function () {
        // 从数据库获取复选框ID列表
        $.ajax({
            url: "/api/get-availability",
            type: 'GET',
            data: {
                "Pro": $("#prochoice").text(),
                "Date": [day, month, year].join('/')
            },
            success: function (data) {
                for (let d of data) {
                    $("#" + d).prop('checked', true); // 遍历ID勾选复选框
                }
            }
        });
    }); // 原代码缺少该闭合括号
}); // 原代码缺少该闭合括号

2. HTML模板（复选框部分） #

<!-- 选择时间 -->
<div class="mt-3 mb-0 m-2" style="text-align: left;">
    <label>Choose availability:</label>
    <!-- 用Jinja循环生成复选框 -->
    <div class="container row justify-content-md-center">
        {% for tt1, tt2 in time %}
        <div class="col-md-6">
              <div class="custom-control custom-checkbox m-0 mt-1" style="text-align: left;">
              <input type="checkbox" name="timescheck" class="custom-control-input" id="{{ tt1 }}">
              <label class="custom-control-label" for="{{ tt1 }}">{{ tt1 }} - {{ tt2 }}</label>
            </div>
       </div>
        {% endfor %}
    </div>
</div>

3. Flask API路由 #

from flask import jsonify

@api.route('/get-availability', methods=['GET'])
def get_availability():
        # 返回标准JSON格式数组
        return jsonify(['16:00', '16:30', '17:00'])

4. Flask模板渲染路由 #

@website.route("/availability-admin")
def availadmin():
    # 定义时间选项列表
    t1 = ['15:00', '15:30', '16:00', '16:30', '17:00', '17:30'] 
    t2 = ['15:30', '16:00', '16:30', '17:00', '17:30', '18:00'] 
    # 将zip对象转为列表，避免模板中迭代器失效
    time = list(zip(t1, t2))
    return render_template('availabilty-admin.html', time = time)

问题修复方案 #

1. 修正jQuery语法错误：补全click事件和ready函数的闭合括号，确保JS代码能正常解析执行。
2. 处理ID中的特殊字符：复选框ID包含冒号（如16:00），冒号是jQuery选择器的特殊字符，直接使用$("#" + d)会失效，改用属性选择器规避问题：

   // 替换原勾选逻辑
   $('input.custom-control-input[id="' + d + '"]').prop('checked', true);
   

3. 修复HTML的label属性：为for属性添加引号，避免ID含特殊字符时解析异常。
4. API返回标准JSON：使用jsonify返回标准JSON数组，确保前端能正确遍历数据。
5. 转换zip对象为列表：zip返回的是迭代器，在Jinja模板中循环一次后会耗尽，转为列表保证模板能正常渲染所有复选框。

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