This might give you an idea on how to proceed.
Here is a working demo.
Here's the relevant code. You might want to separate this out as a component for reusability.
App.IndexController = Em.ArrayController.extend({
selectedOptions: [],
optionsSelected: function() {
console.log(this.get('selectedOptions').toArray());
}.observes('selectedOptions.[]')
});
App.DeveloperController = Ember.ObjectController.extend({
isChecked: false,
resetFlag: false,
_isCheckedChanged: function(){
if(!this.get('resetFlag')) {
var isChecked = this.get('isChecked');
if(isChecked) {
if(this.get('parentController.selectedOptions').length >= 2) {
this.set('resetFlag', true);
this.set('isChecked', false);
} else {
this.get('parentController.selectedOptions')
.addObject(this.get('content'));
}
} else {
this.get('parentController.selectedOptions')
.removeObject(this.get('content'));
}
} else {
this.set('resetFlag', false);
}
}.observes('isChecked')
});
<script type="text/x-handlebars" data-template-name="index">
<ul>
{{#each item in model itemController="developer"}}
<label {{bindAttr class='checked:active'}}>
{{view Ember.Checkbox checkedBinding="isChecked"}}
{{item.content}}
</label>
{{/each}}
</ul>
</script>