Need to update UI when a checkbox is changed

I have a situation where is have a Bootstrap 3 based page which has a checkbox on it:

<input type="checkbox" value="Y" id=userActive checked>

Before I display the form I want to set the correct state based on the value of the field in the database like so:

if (ra.active=='Y') {                
        $("#userActive").prop("checked",true);                
} else {                
        $("#userActive").prop("checked",false);                
} 

The problem is that the UI display of the form is always Checked (as if true). Actually it is always the value of the initial state. If I remove the CHECKED parameter from the HTML then the checkbox UI display will represent UNCHECK regardless of the value.

The actual DOM element is checked or unchecked correctly (which I can verify by posting the form). It is just the UI that is not being displayed correctly.