Office Fabric UI how to check choicefieldgroup radiobutton (javascript/jquery)

Question

I'm developing an OfficeApp with JavaScript and jQuery and it's almost complete, except for one function that does not do what it should do. I have this html for the choicefieldgroup:

            <div class="ms-ChoiceFieldGroup" id="choicefieldgroup" role="radiogroup">
                <div class="ms-ChoiceFieldGroup-title">
                    <label class="ms-Label" id="lblSelectType">Select type:</label>
                </div>
                <ul class="ms-ChoiceFieldGroup-list">
                    <li class="ms-RadioButton">
                        <input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-amount" value="amount">
                        <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
                            <span class="ms-Label" id="lblAmount">Amount</span>
                        </label>
                    </li>
                    <li class="ms-RadioButton">
                        <input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-datetime" value="datetime">
                        <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup">
                            <span class="ms-Label" id="lblDateTime">Date / time</span>
                        </label>
                    </li>
                    <li class="ms-RadioButton">
                        <input tabindex="-1" type="radio" class="ms-RadioButton-input" id="radio1-year" value="year">
                        <label role="radio" class="ms-RadioButton-field" tabindex="0" aria-checked="false" name="choicefieldgroup" id="testjaar">
                            <span class="ms-Label" id="lblYear">Year</span>
                        </label>
                    </li>
                </ul>
            </div>

In javascript I do the following:

Office.initialize = function (reason) {
    $(document).ready(function () {
        **$('input[id=radio1-year]').attr('checked', true);**


        var ChoiceFieldGroupElements = document.querySelectorAll(".ms-ChoiceFieldGroup");
        for (var i = 0; i < ChoiceFieldGroupElements.length; i++) {
            new fabric['ChoiceFieldGroup'](ChoiceFieldGroupElements[i]);
        }
    });
};

With the bold line the option should be checked. If I check in code, the option is checked, but it is not shown in the UI. What am I doing wrong. Or must I add something extra? Instead of the bold line I have also used the following (all with the same result):

$('#radio1-year').prop('checked', true);

Answer 1

I think the label is what controls the UI.

Try $('#radio1-year').siblings('label').attr('aria-checked',true);