JSFiddle - React, Tailwind, and code Playground

by Michael Gadd

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.3/jquery.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.5.1/ember-template-compiler.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ember.js/2.5.1/ember.js"></script>
<script type="text/x-handlebars">
  <h2>Welcome to Ember.js</h2> {{checkbox-list}}
</script>

<script type="text/x-handlebars" data-template-name="components/checkbox-list">
  <h3>Does not update object</h3> {{#each-in checkboxes as |key checkbox|}}
  <label>
    {{ input type="checkbox" disabled=checkbox.disabled checked=checkbox.value change=(action "disableCheckboxes" val)}} {{checkbox.label}}
  </label>
  {{/each-in}}
  <input type="button" value="Log Values" {{action "logValues"}} />


  <h3>Updates object</h3> {{#each-in checkboxes as |key checkbox|}}
  <label>
    {{ input type="checkbox" disabled=checkbox.disabled checked=checkbox.value}} {{checkbox.label}}
  </label>
  {{/each-in}}
  <input type="button" value="Log Values" {{action "logValues"}} />

</script>

JavaScript

App = Ember.Application.create();

App.CheckboxListComponent = Ember.Component.extend({
  checkboxes: {
    a: {
      label: 'Checkbox A',
      disabled: false,
      value: false
    },
    b: {
      label: 'Checkbox B',
      disabled: false,
      value: false
    },
    c: {
      label: 'Checkbox C',
      disabled: false,
      value: false
    },
  },
  actions: {
    disableCheckboxes: function(val) {
    	// code here to disable remaining unchecked
      // checkboxes if greater than 1 checkboxes 
      // are checked.
    },
    
    logValues: function() {
      var results = this.get('checkboxes');
      console.log(results.a.value);
      console.log(results.b.value);
      console.log(results.c.value);
    
    
    }
  }
});