javascript - Need to update UI when a checkbox is changed -

i have situation have bootstrap 3 based page has checkbox on it:

<input type="checkbox" value="y" id=useractive checked> 

before display form want set correct state based on value of field in database so:

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

the problem ui display of form checked (as if true). value of initial state. if remove checked parameter html checkbox ui display represent uncheck regardless of value.

the actual dom element checked or unchecked correctly (which can verify posting form). ui not being displayed correctly.

there nothing wrong code, here working describe. perhaps have other code interfering or special css styling on checkboxes?

//some setup mimic code  var ra = {    active: 'n'  };      if (ra.active == 'y') {    $("#useractive").prop("checked", true);  } else {    $("#useractive").prop("checked", false);  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>    <div class="container">    <div class="row">      <div class="col-xs-12">        <input type="checkbox" value="y" id=useractive checked>      </div>    </div>  </div>