CODEWITHSUNDEEP
ember.js
Arthur Vasconcelos
Arthur Vasconcelos

Reputation: 80

Emberjs get multiple checkbox attributes on change

I have multiples inputs checkbox and I want to know when at least one of them change its attribute "checked" and then enable the button "sim".

<div id="alertReject{{post.id}}" style="display: none;">
  Você deseja rejeitar a resposta #ID {{post.id}}? Porque?
  <hr style="margin: 5px 0;">
  <div class="checkbox">
    <label>{{input type="checkbox"}} Ofensas</label>
    <label>{{input type="checkbox"}} Discussão agressiva entre os participantes</label>
    <label>{{input type="checkbox"}} Discussão pessoalizada</label>
    <label>{{input type="checkbox"}} Postagens que fogem ao tema</label>
    <label>{{input type="checkbox"}} Questionamentos sobre metodologia</label>
    <label>{{input type="checkbox"}} Questionamentos sobre definição de conceitos</label>
    <label>{{input type="checkbox"}} Participante se volta contra o moderador</label>
  </div>
  <hr style="margin: 5px 0;">
  <div class="form-group">
    <label>Mensagem adicional: <b>(opcional)</b></label>
    <textarea name="{{post.id}}-msgOpt"></textarea>
  </div>
  <button class="btn btn-danger" disabled="disabled" {{action 'rejectPost' post}}>Sim</button> |
  <button class="btn btn-default" {{action 'dismissPopover'}}>Não</button>
</div>

I've been tried with components, views, actions and I can't get the checkbox's change event.

What is the best way to do this?

PS.: One important thing to note is that this structure is inside a loop.

Upvotes: 0

Views: 115

Answers (1)

Sam Selikoff
Sam Selikoff

Reputation: 12694

Given 

{{input type="checkbox" checked=foo}}
{{input type="checkbox" checked=bar}}
{{input type="checkbox" checked=baz}}

add a computed property to the template's context that's true if one or more of the values is checked

hasResponded: Ember.computed.or('foo', 'bar', 'baz')

then bind this to a disabled class on the submit button:

<button {{action 'rejectPost' post}}
  {{bind-attr class="hasResponded::disabled :btn :btn-danger"}}>
  Sim
</button>

Upvotes: 1

Related Questions