ticking html checkbox via jQuery

I have a situation where I want to check all checkboxes where user roles correspond to the RoleId that I return from database like this:

 $(document).on("click", ".btnEdit", function () {
            user_id = $(this).val();

            untickAll();
            $.post("/Administrator/GetUserData", { id: $(this).val() }, function (data) {
                console.clear();
                $.each(data.user.Roles, function (i, item) {
                    for (var j = 1; j <= 4; j++) {
                        if ($("#check" + j).attr("roleid") == item.RoleId) {
                            tickCheckbox(j.toString());
                            console.log("Ticked: #" + j + " checkbox");
                        }
                    }
                });
            });
        });

The data.user.Roles Object Array contains following values:

RoleId: 1
RoleId: 2 
// and so on...

And now I have added static attributes to my HTML elements called "roleid" where each of the checkboxes has corresponding role like following:

 <div class="col-sm-4">
                        <h4>User roles:</h4>
                        <div class="am-checkbox">
                            <input id="check1" roleid="1" type="checkbox">
                            <label for="check1">Role 1</label>
                        </div>
                        <hr />
                        <div class="am-checkbox">
                            <input id="check2" roleid="2" type="checkbox">
                            <label for="check2">Role 2</label>
                        </div>
                        <hr />
                        <div class="am-checkbox">
                            <input id="check3" roleid="3" type="checkbox">
                            <label for="check3">Role 3</label>
                        </div>
                        <hr />
                        <div class="am-checkbox">
                            <input id="check4" roleid="4" type="checkbox">
                            <label for="check4">Role 4</label>
                        </div>
                        <hr />
                 </div>

Please note how I numerated the checkbox values:

check1 => corresponds exactly to role id = 1
check2 => correspodnds exactly to role id = 2
// and so on...

Now where the problem occurs here is as following, please note method untickAll():

   function untickAll() {
            for (var i = 1; i <= 4; i++) {
                $('#check' + i).prop('checked', false);
            }
        }

Method unticks (resets) all of the checkboxes each time the button edit is clicked...

Now while doing a foreach loop with jQuery I check whether the specific checkbox contains the attribute "roleid" which would correspond the one from the DB, if it does, I shall tick the checkbox ...

The problem here arises when I call the method:

untickAll();

Once I do, each time all of the checkboxes are stuck unchecked for some reason...

I have also placed a console.log("Ticked: " + j + " checkbox");

whether the if statement passes through to see if it tries to check the specific checkbox, and it really outputs in console like:

"Ticked #1 checkbox"

But the checkbox still stays unchecked for some reason...

If I remove untickAll(); method , checkboxes get checked only the first time when I click edit button, next time it only keeps checking the matching values (without reseting them first like I want)...

What am I doing wrong here?