CODEWITHSUNDEEP
ember.jsember-dataember-cli
Pepper
Pepper

Reputation: 719

ember checkbox - select 1, not all select all

I am using Ember Version 2.5.1

I have setup checkbox, and they work when selected. But, when I select one box, for one user, all the boxes become selected for all the users. E.g if I select a team (Speedy) for Sophie, then everyones checkboxes end up checked and being on team Speedy. How do i stop this? And make it so each person can be on a different team.

e.g. the out come is a list of everyones names, (then if 'Team Speedy' is checked), next to everyones name is 'Team Speedy'.

teams.hbs;

          <div class="container">
              <table class="table">
                  <thead class="thead-inverse">
                  <tr>
                      <th>Name</th>
                      <th>Team Speedy</th>
                      <th>Team Alpha</th>
                      <th>Team Invincible</th>
                  </tr>
                  </thead>
                  <tbody>
                   {{#each model as |signed-player|}}
                        <tr>
                          <td> {{signed-player.name}} </td>
                          <td> {{input type='checkbox' checked=speedy}} </td>
                          <td> {{input type='checkbox' checked=alpha}} </td>
                          <td> {{input type='checkbox' checked=invincible}} </td>
                        </tr>
                   {{/each}}
                  </tbody>
              </table>


            {{#each model as |signed-player|}}
                <p><b>{{signed-player.name}}</b> is on the following team: <b>{{teamName}}</b></p>
            {{/each}}

          </div>

controllers/team.js

  speedy: false,
  alpha: false,
  invincible: false,


  teamName: function()
  {
    if ( this.get('speedy') ) {
      return 'Team Speedy';
    }
    else if ( this.get('alpha') ) {
      return 'Team Alpha';
    }
    else if ( this.get('invincible') ) {
      return 'Team Invincible';
    }
    else {
      return 'No team yet';
    };
  }.property('speedy', 'alpha', 'invincible'),

Upvotes: 0

Views: 332

Answers (1)

Grapho
Grapho

Reputation: 1654

The main problem I see in your example, is you are not setting any properties on any of the players. You are computing only one property {{teamName}} and just displaying it once per player, which is why clicking one checkbox appears to change the team for everybody... when in reality you are not actually setting any players onto any teams at all.

The other problem i see: you need to decide if chackboxes are the right UI for your selection. can a single player be on more than one team? if so, then checkbox is fine.. if not, then a select box or a set of radio inputs are probably better.

All that being said... each player object/record needs a property that actually stores the value representing which team(s) they belong to.

You will also need an action from each checkbox/radio/select/whatever to actually set the selected value onto the player object:

Here is my example: https://ember-twiddle.com/1fe44ad4dc0494973c494a624ead79b7?fileTreeShown=false&openFiles=templates.application.hbs%2C

there are a number of things going on here... but essentially what we are doing is using a select input of choice (for me.. radio) and using the change action from the input to set each specific player's team property... which is defined on each player object to begin with.

I use a mut helper in my action in the example.. is is a quick way to set a value in a template action.. if you wanted to use a checkbox instead.. you will most likely want to replace the mut helper and apply your own custom action in a controller.

Please follow up if you need/want any extra explianation

Upvotes: 1

Related Questions