title: MVC / Bootstrap - Radio Button in group not selecting on initialisation
body: <p>I have an edit form in my MVC application that has a Traffic Light Status.</p>
  
  <p>When the form is initially opened, the check mark on the "lights" always set to "green" despite jQuery code to set otherwise.</p>
  
  <p>All the code is firing, but it just does not set the initial state.</p>
  
  <p>In this simplified example, if the Model's AlertLevel is set to "Red", the "tick" is still on the "green"</p>
  
  <p><strong>Markup</strong></p>
  
  <pre><code>@Html.HiddenFor(model =&gt; model.AlertLevel)
  &lt;span class="btn-group RAGStatus" data-toggle="buttons"&gt;
      &lt;label class="btn btn-success active " style="width:50px; height: 30px"&gt;
          &lt;input type="radio" name="ragStatus" id="ragButton_Green" autocomplete="off" value="Green"&gt;
          &lt;span class="glyphicon glyphicon-hidden unchecked"&gt;&lt;/span&gt; &lt;span class="glyphicon glyphicon-ok checked"&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;label class="btn btn-warning" style="width:50px; height: 30px"&gt;
          &lt;input type="radio" name="ragStatus" id="ragButton_Amber" autocomplete="off" value="Amber"&gt;
          &lt;span class="glyphicon glyphicon-hidden unchecked"&gt;&lt;/span&gt; &lt;span class="glyphicon glyphicon-ok checked"&gt;&lt;/span&gt;
      &lt;/label&gt;
      &lt;label class="btn btn-danger" style="width:50px; height: 30px"&gt;
          &lt;input type="radio" name="ragStatus" id="ragButton_Red" autocomplete="off" value="Red"&gt;
          &lt;span class="glyphicon glyphicon-hidden unchecked"&gt;&lt;/span&gt; &lt;span class="glyphicon glyphicon-ok checked"&gt;&lt;/span&gt;
      &lt;/label&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p><strong>jQuery</strong></p>
  
  <pre><code>$(function () {
      var status = $("#AlertLevel").val();
      $('#ragButton_' + status).prop("checked", true);
  })
  </code></pre>
  
  <p><strong>Model</strong></p>
  
  <pre><code>public class DeptStatus
  {
      public string AlertLevel { get; set; }
  }
  </code></pre>
  
  <p><strong>CSS</strong> (for the glyph icon display)</p>
  
  <pre><code>.RAGStatus .checked {
      display: none;
  }
  
  .RAGStatus .active .checked {
      display: inline-block;
  }
  
  .RAGStatus .active .unchecked {
      display: none;
  }
  </code></pre>
  
  <p><strong>Update</strong></p>
  
  <p>In a follow on jQuery function (removed from example), if I do <code>var ragStatus = $('input[name=ragStatus]:checked').val();</code> then it returns "Red"</p>