When a checkbox is checked using javascript, state is not reflected on UI

I have a checkbox in HTML UI that is informational (i.e. user cannot change it. Used onclick="return false;" to achieve this.). This checkbox is checked when a selection is made in another field (A JSONArray returned from back end and one of the entries selected by user). If the selected entry has one of the fields, say 'xxxField', is set to value 'XXX' then the checkbox needs to be checked.

<input id="xxxEntity" type="checkbox" onclick="return false;" />

Following is the javascript function that operate on this checkbox

    function enableXXXEntityType(entityJs){
        var entity = JSON.parse(entityJs);
        var name = entity.name;
        var xxxType = entity.xxxField;

        var typeElm = document.getElementById('xxxEntity');
        if("XXX" === xxxType){
            typeElm.checked=true;
            alert(typeElm.checked);
        }else{
            typeElm.checked=false;
        }
    }

The issue is when function is executed; it sets the checkbox (checked=true) but this is not reflected on UI. Checkbox continues to show as unchecked. Alert in the function shows true. If I submit the form, checkbox value is correctly persisted and if I open the entity in view mode, I can see the checkbox 'xxxEntity' checked.

I am not sure what is the issue here.

I tried setting attribute "checked" set to "true" as well (typeElm.setAttribute("checked","true")), but that as well didn't solve the problem.

I have verified the behavior on Chrome and Edge and it is same, so i do not think it is browser specific.

Any help here is greatly appreciated.

Thanks, RM

PS: I have tried searching on stackOverflow but could not find this problem. There are multiple questions relating to issues with checking checkbox state, but not related to state not reflecting on UI. If I have missed any existing answered question, please forgive me and point me to the question.