Let's break down why this is happening and how to fix it step by step:

Root Cause #

When using dom-repeat to generate paper-radio-button elements, two common mistakes lead to unintended multiple selections:

1. Mismatched name attributes: Radio buttons rely on matching name values to form an exclusive group. If you’re assigning unique names to each button (or not setting a consistent name at all), the browser and Polymer won’t recognize them as part of the same mutually exclusive set.
2. Element reuse by dom-repeat: Without a proper key attribute, Polymer might reuse existing radio button elements when your list updates. This can leave old name values or checked states intact even when the underlying data changes.
3. Unbound selection state: If the paper-radio-group’s selected property isn’t properly bound to a component property, the group can’t track and enforce single-selection behavior consistently.

Step-by-Step Fix #

1. Use a Consistent name for All Radio Buttons

Ensure every paper-radio-button inside the group shares the exact same name value. You can hardcode it or bind it to a single component property:

<paper-radio-button name="exclusive-radio-group" value="{{option.value}}">{{option.label}}</paper-radio-button>

2. Add a key to dom-repeat

Prevent element reuse by assigning a unique key to each item in dom-repeat. Use a distinct identifier from your data (like an id field) to guarantee each radio button renders as a unique element:

<dom-repeat items="{{radioOptions}}" key="id" as="option">
  <template>
    <!-- Your paper-radio-button here -->
  </template>
</dom-repeat>

3. Bind the selected Property of paper-radio-group

Two-way bind the selected property of paper-radio-group to a component property. This lets the group manage selection state properly, even when the list updates:

<paper-radio-group selected="{{selectedRadioValue}}">
  <!-- dom-repeat goes here -->
</paper-radio-group>

Complete Working Example #

<dom-module id="custom-radio-group">
  <template>
    <style>
      :host {
        display: block;
        padding: 16px;
      }
    </style>

    <paper-radio-group selected="{{selectedOption}}">
      <dom-repeat items="{{availableOptions}}" key="id" as="option">
        <template>
          <paper-radio-button name="single-selection-group" value="{{option.id}}">
            {{option.label}}
          </paper-radio-button>
        </template>
      </dom-repeat>
    </paper-radio-group>

    <p>Selected Option ID: [[selectedOption]]</p>
  </template>

  <script>
    Polymer({
      is: 'custom-radio-group',
      properties: {
        availableOptions: {
          type: Array,
          value: () => [
            { id: 'opt1', label: 'First Option', value: '1' },
            { id: 'opt2', label: 'Second Option', value: '2' },
            { id: 'opt3', label: 'Third Option', value: '3' }
          ]
        },
        selectedOption: {
          type: String,
          notify: true,
          value: 'opt1'
        }
      }
    });
  </script>
</dom-module>

Additional Checks #

• If you’re using older versions of Polymer or paper-components, consider upgrading to the latest stable release—some legacy versions had bugs with dom-repeat and radio group interactions.
• Avoid manually setting the checked property on individual paper-radio-button elements. Let the paper-radio-group manage selections via the selected property instead.

内容的提问来源于stack exchange，提问作者user3310115