Некорректное отображение :checked при выборе через JavaScript

HTML:

<label class="radio-inline">
    <input type="radio" name="admin" value="t" id="adminTrue"> Да
</label>
<label class="radio-inline">
    <input type="radio" name="admin" value="f" id="adminFalse"> Нет
</label>

JavaScript

$('#infoUser').on('show.bs.modal', function (event) {
    var button = $(event.relatedTarget)
    var modal = $(this)
    var admin = button.data('user-admin')
    if (admin == 't') {
        modal.find('input[id="adminTrue"]').attr('checked', 'checked');
    } else {
        modal.find('input[id="adminFalse"]').attr('checked', 'checked');
    }
})
$('#infoUser').on('hide.bs.modal', function (event) {
    var modal = $(this)
    modal.find('input[name="admin"]').removeAttr('checked');
})

Браузеры отображают не правильно выделенные radio, хотя есть анализировать код Firebug, то в DOM все правильно меняется.

Здесь можно посмотреть полный код с примером:
http://codepen.io/ArsenBespalov/full/eNOwRy/