解决AJAX动态加载后HTML Select元素Required验证失效问题

<div class="mb-3 col-lg-6">
    <label for="id_kelas" class="form-label">Kelas Pembawa Barang</label>
    <select class="form-select" aria-label="select-id_kelas" required id="id_kelas" name="id_kelas" disabled>
        <option disabled selected>XII-RPL 2/XI-RPL 2/dll</option>
        @foreach ($dataKelas as $kelas)
            <option value="{{ $kelas['id'] }}">{{ $kelas['nama_kelas'] }}</option>
        @endforeach
    </select>
</div>

<div class="mb-3 col-lg-6">
    <label for="id_kelas" class="form-label">Kelas Pembawa Barang</label>
    <select class="form-select" aria-label="select-id_kelas" required id="id_kelas" name="id_kelas" disabled>
        <option disabled selected value="">XII-RPL 2/XI-RPL 2/dll</option>
        @foreach ($dataKelas as $kelas)
            <option value="{{ $kelas['id'] }}">{{ $kelas['nama_kelas'] }}</option>
        @endforeach
    </select>
</div>

// ... 其他JS代码

$("#id_role").on("change", function (e) {
    var role = e.target.value;
    $("#nama_pembawa").empty(); // 清空当前选项
    if (role == "Admin" || role == "Operator" || role == "Guru") {
        $("#id_kelas").prop("disabled", true);
        $.ajax({
            headers: {
                "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
            },
            url: "/inventaris/getdataguru",
            method: "post",
            dataType: "json",
            success: function (data) {
                $.each(data, function (i, data) {
                    $("#nama_pembawa").append(
                        $("<option>", {
                            value: data.id,
                            text: data.nama,
                        })
                    );
                });
            },
        });
    } else {
        $("#id_kelas").prop("disabled", false);
        // 注意：原始代码中此部分有嵌套问题，但与required验证失效的核心问题无关。
        // 建议将id_kelas的change事件绑定移到文档加载时，并在id_role的change事件中根据role的值来触发或禁用相关逻辑。
        $("#id_kelas").on("change", function (e) { 
            var id_kelas = e.target.value;
            $("#nama_pembawa").empty(); 
            $.ajax({
                headers: {
                    "X-CSRF-TOKEN": $('meta[name="csrf-token"]').attr("content"),
                },
                url: "/inventaris/getdatasiswa",
                method: "post",
                data: { id_kelas: id_kelas },
                dataType: "json",
                success: function (data) {
                    console.log(data);
                    $.each(data, function (i, data) {
                        $("#nama_pembawa").append(
                            $("<option>", {
                                value: data.id,
                                text: data.nama,
                            })
                        );
                    });
                },
            });
        });
    }
});

// ... 其他JS代码