Internally managed selection state

components.my-button.js

import Ember from 'ember';

export default Ember.Component.extend({
  isDisabled: Ember.computed('selections.[]', function() {
    const length = this.get('selections.length')
    if (this.get('multiSelect')) {
    	return length < 1
    } else {
    	return length !== 1
    }
  })
});

components.my-component.js

import Ember from 'ember';

export default Ember.Component.extend({
  selections: Ember.A(),
  
  actions: {
    onSelect: function(item) {
      if (this.get('selections').includes(item)) {
 this.get('selections').removeObject(item);
      } else {
 this.get('selections').addObject(item)
      }
    }
  }
});

controllers.application.js

import Ember from 'ember';

export default Ember.Controller.extend({
  appName: 'Ember Twiddle',
  
  actions: {
    controllerHandler: function() {
      alert('awesome')
    }
  }
});

templates.application.hbs

<h4>Selecting one checkbox will enable both buttons, selecting more than one checkbox will disable the single select button and leave the multi select button enabled</h4>
<h4>The state is managed internally and yielded back via a contextual component</h4>
<br>
<br>
{{#my-component as |onSelect controls|}}
  <input 
  	type="checkbox" 
   	onchange={{action (action onSelect '1')}}
  >
  <input 
  	type="checkbox" 
    onchange={{action (action onSelect '2')}}
  >
  
  {{controls.button 
  	onClick=(action 'controllerHandler')
  }}
  {{controls.button 
  	multiSelect=true 
  	onClick=(action 'controllerHandler')
   }}
{{/my-component}}
<br>
<br>

templates.components.my-button.hbs

<button disabled={{isDisabled}} onclick={{action (action onClick)}}>Click me</button>

templates.components.my-component.hbs

{{isSelected}}
{{yield  
  	(action 'onSelect') 
  	(hash 
    	button=(
      	component 'my-button'
        	selections=selections
     	)
  	)
 }}

twiddle.json

{
  "version": "0.8.1",
  "EmberENV": {
    "FEATURES": {}
  },
  "options": {
    "use_pods": false,
    "enable-testing": false
  },
  "dependencies": {
    "jquery": "https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.3/jquery.js",
    "ember": "2.5.1",
    "ember-data": "2.5.2",
    "ember-template-compiler": "2.5.1"
  }
}