# Disable button depending on how many checkbox are checked

**URL:** <https://discuss.emberjs.com/t/disable-button-depending-on-how-many-checkbox-are-checked/9175>\
**Category:** Uncategorized\
**Created:** [November 25, 2015, 2:14am UTC](https://discuss.emberjs.com/t/disable-button-depending-on-how-many-checkbox-are-checked/9175 "2015-11-25T02:14:35Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![celo](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@celo](https://discuss.emberjs.com/u/celo)\
**Post date:** [November 25, 2015, 2:14am UTC](https://discuss.emberjs.com/t/disable-button-depending-on-how-many-checkbox-are-checked/9175/1 "2015-11-25T02:14:35Z")

</div>

Guys, i’m using the follow code to block edit and delete button, depending on how many checkbox are checked in the table list:

```
  allowEdit: Ember.computed('model.@each.checked', function() {
    let count = 0;
    let result;

    this.get('model').forEach(item => {
      item.get('checked') ? count += 1 : count = count;
    });

    count === 1 ? result = true : result = false;
    return result;
  }),

  allowDelete: Ember.computed('model.@each.checked', function() {
    let count = 0;
    let result;

    this.get('model').forEach(item => {
      item.get('checked') ? count += 1 : count = count;
    });

    count >= 1 ? result = true : result = false;
    return result;
  }),

```

And in my template i have:

```
  {{#link-to "events.edit"}}
    <li class="controller __item {{if allowEdit "" "controller__ item--disabled"}}">
      <i class="icon icon __pencil icon__ 2x"></i>
      <span class="controller__legend">Editar</span>
    </li>
  {{/link-to}}
  <li class="controller __item {{if allowDelete "" "controller__ item--disabled"}}" {{action "delete"}}>
    <i class="icon icon __trash icon__ 2x"></i>
    <span class="controller__legend">Deletar</span>
  </li>

```

As you can see, i’m doing pretty much the same thing in the two computed properties. I would like to replace the two for one, but i don’t know exactly how i could do that.

edit button will be free if just one checkbox are checked delete button will be free if one or more checkbox are checked.

Thanks!!

---

<div class="post-metadata">

**Author:** ![spectras](https://avatars.discourse-cdn.com/v4/letter/s/bbce88/32.png) [@spectras](https://discuss.emberjs.com/u/spectras)\
**Post date:** [November 25, 2015, 10:12am UTC](https://discuss.emberjs.com/t/disable-button-depending-on-how-many-checkbox-are-checked/9175/2 "2015-11-25T10:12:43Z")

</div>

Factor out common behavior:

```
checkedCount: Ember.computed('model.@each.checked'), function () {
    let count = 0;
    get(this, 'model').forEach(function (item) {
        if (get(item, 'checked')) { count += 1; }
    });
    return count;
}),
allowEdit: Ember.computed.equal('checkedCount', 1),
allowDelete: Ember.computed.gte('checkedCount', 1)

```

Or, even simpler:

```
checkedModels: Ember.computed.filterBy('models', 'checked'),
allowEdit: Ember.computed.equal('checkedModels.length', 1),
allowDelete: Ember.computed.gte('checkedModels.length', 1)

```

First property will be an array of all checked models. Can come in handy in other parts of your code as well.

---

<div class="post-metadata">

**Author:** ![celo](https://avatars.discourse-cdn.com/v4/letter/c/ecb155/32.png) [@celo](https://discuss.emberjs.com/u/celo)\
**Post date:** [November 25, 2015, 12:47pm UTC](https://discuss.emberjs.com/t/disable-button-depending-on-how-many-checkbox-are-checked/9175/3 "2015-11-25T12:47:54Z")

</div>

Get it!

I didn’t know that i can do that!!! Thank you spectras!