radio button like behavior with btn-group

sexyRadioButtons.html

<style>
    #radioBtn .notActive {
        color: #555;
    }
    #radioBtn .active {
        z-index: 0;
    }
</style>
<script type="text/javascript">
    $(document).ready(function () {
        $('#radioBtn a').on('click', function () {
            var sel = $(this).data('title');
            var tog = $(this).data('toggle');
            $('#' + tog).prop('value', sel);

            $('a[data-toggle="' + tog + '"]').not('[data-title="' + sel + '"]')
                .removeClass('active').addClass('notActive');
            $('a[data-toggle="' + tog + '"][data-title="' + sel + '"]').removeClass('notActive')
                .addClass('active');
        });
</script>

<div class="input-group">
    <div id="radioBtn" class="btn-group">
        <a class="btn btn-default active" data-toggle="passou" data-title="1">APROVADO</a>
        <a class="btn btn-default notActive" data-toggle="passou" data-title="2">AMBOS</a>
        <a class="btn btn-default notActive" data-toggle="passou" data-title="3">REPROVADO</a>
    </div>
    <input type="hidden" name="passou" id="passou" value="1">
</div>

<p class="text-muted"> Thanks to: https://bootsnipp.com/snippets/featured/radio-button-tabs </p>