Nrthugu

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);