余烬操作阻止设置复选框值

Ember action preventing checkbox value from setting

本文关键字：复选框 设置 操作 余烬      更新时间：2023-09-26

在我的余烬应用程序中，我想通过循环动态呈现一组复选框，如果选中了 2 个复选框，则禁用任何未选中的复选框。

当选中具有更改操作的复选框时，我在将值设置为"true"时遇到问题。对于以下示例，选中该复选框时不会设置checkbox.value。

{{ input type="checkbox" disabled=checkbox.disabled checked=checkbox.value change=(action "disableCheckboxes" val)}} {{checkbox.label}}

但是，当我删除该操作时，它确实会设置：

{{ input type="checkbox" disabled=checkbox.disabled checked=checkbox.value}} {{checkbox.label}}

JSFiddle 上的完整示例

如何在运行操作的同时设置值？或者当已经选择了 2 个复选框时，禁用未选中复选框的更好方法是什么？

好吧，首先你可以使用一个动作。 看看这个余烬。

但我建议直接将您的值绑定到目标对象。看这里。

这个想法基本上是包装你的数组并计算包装中的 isDisabled：

boxes:[{id:1,value:true},{id:2},{id:3}],
boxArr: Ember.computed('boxes.@each.value', {
  get() {
    let disableOthers = Ember.get(this, 'boxes').filterBy('value', true).get('length') >= 2;
    return Ember.get(this, 'boxes').map(origin => {
      return {
        origin,
        disabled: disableOthers && !origin.value,
      };
    });
  }
}),

然后，您可以在模板中使用它：

{{#each boxArr as |box|}}
  {{input type="checkbox" disabled=box.disabled checked=box.origin.value}} {{box.origin.id}}
{{/each}}

第三种存档方法是使用帮助程序。您可以只有一个计算属性，说明是否应禁用所有带有value=false的复选框，然后使用and和not帮助程序来设置disabled=(and disableFalseCheckboxes (not box.value)。为此查看余烬真相助手。

相关文章：