Wrong checked checkboxes after ajax call based on radio button selected-CodePudding

I have a list of checkboxes which are checked or unchecked based on 3 radio buttons. When the selected radio button changes, an ajax request determines which checkboxes will be checked based on the selected radio button (its value)

However, when I change the selection of 2 radio buttons a little quickly, the boxes that are checked are those of as if I had selected the 2 radio buttons at the same time.

checked checkboxes when "manager" is selected : Manager selected

checked checkboxes when "test" is selected : test selected

Problem -> checked checkbox when I select "manager" then "test" quickly : manager then test selected quickly But the last selected is "test" so I need have checked checkbox for "test" not "test" and "manager" in same time.

Here my JS code :

$(document).on("change", "input[type=radio][name=\"user[profile]\"]", function (){

        let value = $( this ).val();
        let data = {profile_id: value}
        let url = HOME_URL   '/API/getmodules/'   value

        $('input:checkbox[id^="user_access_"]').prop('checked', false) //initialize all checkboxes at uncheck
        $('span[class^="badge badge-success"]:not([id^="span-example"])').contents().unwrap();

        $.post(url, data).then(function (response)
        {

            let modulesData = response.modules
            for (let module in modulesData){
                let moduleValue = modulesData[module].id

                let $modules = $('input:checkbox[id^="user_access_"][value='   moduleValue   ']')
                let $modulesLabel = $('label[for="user_access_'   modulesData[module].toolId   '_'   moduleValue   '"]')

                $modules.prop('checked', true) // check the checkboxes depends on the data response
                $modulesLabel.empty();
                $modulesLabel.append('<span >'   modulesData[module].name   '</span>');
            }

        })

    })

Thanks in advance

CodePudding user response：

Here is the solution ! Thanks to freedomn-m !

$(document).on("change", "input[type=radio][name=\"user[profile]\"]", function (){

        let value = $( this ).val();
        let data = {profile_id: value}
        let url = HOME_URL   '/API/getmodules/'   value
        // console.log(data.profile_id)

        $('input:checkbox[id^="user_access_"]').prop('checked', false) //initialize checkbox at uncheck
        $('span[class^="badge badge-success"]:not([id^="span-example"])').contents().unwrap();

        $.post(url, data).then(function (response)
        {
            console.log("response : "   response.profile_id   ", data : "   data.profile_id)

            let current_profile_id = $("input[type=radio][name=\"user[profile]\"]:checked").val()
            if(response.profile_id == current_profile_id){
                let modulesData = response.modules
                for (let module in modulesData){
                    let moduleValue = modulesData[module].id

                    let $modules = $('input:checkbox[id^="user_access_"][value='   moduleValue   ']')
                    let $modulesLabel = $('label[for="user_access_'   modulesData[module].toolId   '_'   moduleValue   '"]')

                    $modules.prop('checked', true) // check the checkboxes depends on the data response
                    $modulesLabel.empty();
                    $modulesLabel.append('<span >'   modulesData[module].name   '</span>');
                }
            } else{ console.log("ERROR")}

        })

    })