Radio button always select the first one regardless which one is selected

1.1k Views Asked by At

I don't know why, whenever any of these radio button is clicked, it always select the first one. The radio buttons are auto-generated by the values from the database. How can I fix this?

The Blaze template:

<ul class="list-group">
   {{#each OnlyUsersSchool}}
      <li class="list-group-item" style="font-size: 12px; margin-bottom: -10px;">
        <input type="radio" id="schoolsstudent" name="schoolsstudent" value="{{_id}}"><label for="schoolsstudent"><strong>{{addschoolname}}</strong>, <em>{{trimString geocomplete 0 40}}</em></label>
      </li>
   {{/each}}
</ul>

The helper function:

OnlyUsersSchool: function () {
        var subValues = Meteor.subscribe('allUserSchools');
        if (Meteor.userId() && subValues.ready()) {
            if (Meteor.user().emails[0].verified) {
                return SchoolDb.find({userId: Meteor.userId()}).fetch().reverse();
            } else {
                Bert.alert('Please verify your account to proceed', 'success', 'growl-top-right');
            }
        }
    }

enter image description here

1

There are 1 best solutions below

0
ken4ward On

Sorry, It was a mistake on my part. I ought to change id to be unique. So finally. This is what worked.

<ul class="list-group">
   {{#each OnlyUsersSchool}}
      <li class="list-group-item" style="font-size: 12px; margin-bottom: -10px;">
         <input type="radio" id="{{_id}}" name="schoolsstudent" value="{{_id}}">
         <label for="{{_id}}"><strong>{{addschoolname}}</strong>, <em>{{trimString geocomplete 0 45}}</em></label>
        </li>
    {{/each}}
</ul>