Checkbox inputs and value attributes

1

Why is it that ember refuses to let me set a value for a checkbox?

I have a list of options that need to allow for selection, but when I try to use the following snippet embers throws an exception.

{{#each c in classes}}
  <label>
    {{input type="checkbox" name="selectedClasses[]" value=c.id}}
    {{name}}
  </label>
{{/each}}

Exception

Uncaught Error: Assertion Failed: {{input type='checkbox'}} does not support setting `value=someBooleanValue`; you must use `checked=someBooleanValue` instead.

Is there a better way to do this with Ember?

2

Yes, as the error says use checked not value:

{{input type="checkbox" name="selectedClasses[]" checked=c.id}}
2 Likes
3

That is what the error message says, but I am trying to set the value associated with the checkbox, not the checked status.

4

This looks like it could be a bug.

from MDN regarding the value attribute: The initial value of the control. This attribute is optional except when the value of the type attribute is radio or checkbox.

I looked through the checkbox helper and didn’t see an attributeBinding for value. As I understand it, this attribute should be present for the checkbox input to represent a value. Am I missing something that ember is doing in the background?

5

No change about ‘value’ attribute ? I use Ember 2.4.3 and this error is always here :disappointed:

6

You don’t really need the input helper at this point, you can use the native input elements.

<input
  type="checkbox"
  checked={{checked}}
  value={{value}}
  onchange={{action 'handleCheckboxChange' value='target.checked'}}
/>
1 Like
7

But this solution is only one-way binding on booleanValue CP (checked attribute). We must manage booleanValue in handleCheckboxChange too…

8

You’ll always need to manage checked/value in some way either via a CP or inline helper (recommend you look at ember-truth-helpers if you haven’t already). The example was just demonstrating using the native element. If you want to do two-way data binding you can – though I usually don’t to keep aligned with DDAU and to reduce future travelers from using observers to capture changes.

<input
  type='checkbox'
  checked={{checked}}
  value={{value}}
  onchange={{action (mut checked) value='target.checked'}}
/>

Two-way bound: JS Bin - Collaborative JavaScript Debugging

I’m a little unclear on the use of value here, are you doing a form POST? If not, I believe you can just rely on checked either as a computed property or an inlined helper. Otherwise, I’m curious to know your use case for value.

9

I know I am a late comer in this discussion, but I have been studying this issue and have found the following solution that some may find helpful. I wanted to find a solution that used the native Ember input helper for a checkbox {{input type=checkbox }} that could call an action that could manipulate values or class names or whatever else I fancied. I discovered as Chris did that you can not use ‘value=variable’ with the input helper. I also had no luck using action=“someAction” on=“click”. I tried many varieties of the action call but none worked. So finally this is what I came up with that achieved everything I wanted. As you can see it does not call an action but rather in the component controller it defines a variable to hold the boolean value for “checked”, and a method outside of the regular actions feature that simply observes the checked variable so that it fires whenever a change occurs which in this case is whenever the checkbox is clicked. I offer this because I has to look so hard and so long for a solution. I hope it helps those who are also looking for a solution. Peace. (Have no idea how you guys formatted your code with such a limited text editor :slight_smile: )

In Component template hbs:

{{input type=“checkbox” checked=myVal }}

In Component Controller js file:

myVal: false,

toggleCheckbox: function() {

 //change values or classes or whatever else you wish to do

}.observes(‘myVal’)

10

In case it’s of any help, you should be able to use the {{input}} helper and avoid 2-way data binding and observers, via something like (where model is any object the input form is supposed to be manipulating):

// template.hbs
{{input type="checkbox" checked=(readonly model.isChecked) click=(action 'checkboxClicked' model)}}

// component.js
actions: {
  checkboxClicked(model) {
    this.get('model').toggleProperty('isChecked');
    // do all the other things
  }
}
1 Like