Question

我有一个纸质列表框，其中包含列表中每个纸张项目中的纸张复选框。

<paper-listbox id="groupMembers" multi attr-for-selected="label">
    <template is="dom-repeat" items="[[users]]" as="member">
        <paper-item label="[[member.user]]">
            <span class="member-user">[[member.user]]</span>
            <paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
        </paper-item>
    </template>
</paper-listbox>

每当单击该复选框时，它也会更改列表框项目的选定状态，从而导致选择或取消选择纸质项目。

如何防止这种情况？

Answer 1

paper-listbox使用Polymer.IronSelectableBehavior和Polymer.IronMultiSelectableBehavior。因此，您可以使用selectable属性以防止更改所选状态。

selectable是一个CSS选择器字符串。如果设置了此选项，则只能选择与CSS选择器匹配的项目。您可以放置一个随机字符串，使其不会与paper-item元素匹配。

Demo

Answer 2

我通过避免它解决了问题;）

将复选框从纸张项目中移出到dom-repeat中，如下所示：

<paper-listbox id="groupMembers" multi attr-for-selected="label">
    <template is="dom-repeat" items="[[users]]" as="member">
        <paper-item label="[[member.user]]">
            <span class="member-user">[[member.user]]</span>
        </paper-item>
        <div class="checkWrapper">
            <paper-checkbox checked="[[member.isManager]]"></paper-checkbox>
        </div>
    </template>
</paper-listbox>

有点CSS定位魔法有效。添加了一个包装div以允许绝对定位。

防止纸张列表框选择更改

2 个答案: