Question

在我的ember应用程序中，我想通过循环动态渲染一组复选框，如果已选中其中两个复选框，则禁用任何未选中的复选框。

我在将值设置为＆＃39; true＆＃39;时遇到问题选中具有更改操作的复选框时。对于以下示例，选中该复选框后，1461568423未设置。

checkbox.value

然而，当我删除动作时，它确实被设置：

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

Full example on JSFiddle

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

Answer 1

好吧，首先你可以使用一个动作。结帐this ember-twiddle。

但我建议直接将您的值绑定到目标对象。 See here

这个想法基本上是包装你的数组并在包装中计算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)。结帐ember-truth-helpers。

Ember动作阻止设置的复选框值

1 个答案: