My checkbox is always checked!


#1

Hello, I need help with what I am sure is a super rookie mistake.

I am starting from the default blank application and simply added a checkbox in the “hello” template:

<input type="checkbox" checked={{isChecked}}/>

Then I have my template helper:

  Template.hello.helpers({
    counter: function () {
      return Session.get('counter');
    },
    isChecked: function() {
      return false;
    }
  });

I think this is conform to the documentation at https://atmospherejs.com/meteor/spacebars (under “In attribute values”).
BUT the checkbox is always showing as checked! It is just showing as <input type="checkbox"> in chrome dev tool and I can’t tell how to troubleshoot where the checked state is coming from.

If I do it like this instead:

<input type="checkbox" {{isChecked}}/>

...
isChecked: function() { return '' }

That works (i.e. it is unchecked) - but can’t I have it just work with a boolean instead? Ultimately I want to bind to a record like this:

<input type="checkbox" checked={{rec.isSomeFlagSet}}/>

and I don’t want to have to create a template helper for each flag.


#2

Maybe you can do the following :

<input type="checkbox"
{{ #if isChecked}}
checked
{{ /if }}/>

The true/false would be only handled in the helper.


#3

This gives me an error:

While processing files with templating (for target web.browser):
m2.html:14: Reactive HTML attributes must either have a constant name or consist of a single {{helper}} 
providing a dictionary of names and values.  A template tag of type BLOCKOPEN is not allowed here.
...nput type="checkbox" {{#if isChecked}}che...

#4

You need to do:

<input type="checkbox" {{isChecked}}/>

and

Template.hello.helpers({
  counter: function () {
    return Session.get('counter');
  },
  isChecked: function() {
    return ''; // or 'checked' when checked
  }
});

#5

If you absolutely must use Boolean, then you’ll have to move the logic into the template, but it’s not pretty:

{{#if isChecked}}
  <input type="checkbox" checked />
{{else}}
  <input type="checkbox" />
{{/if}}

#6

Is it a bug in the documentation then, or am I just reading this wrong? It states:

In Attribute Values
A double-braced tag may be part of, or all of, an HTML attribute value:

<input type="checkbox" class="checky {{moreClasses}}" checked={{isChecked}}>

An attribute value that consists entirely of template tags that return null,
undefined, or false is considered absent; otherwise, the attribute is
considered present, even if its value is empty.


#7

Well, spacebars is based on HTML, and the HTML syntax for checked is simply “checked” (so, checked=... is just seen as checked).

So, I guess you’ve found a typo in the doc :smile:


#8

Oh, also, in HTML5, the self-closing / is not needed (strictly, it’s incorrect to use it):

<input type="checkbox" checked>

#9

Use quotes when calling the helper.

<input type="checkbox" checked="{{isChecked}}">

Returning a boolean to the isChecked helper works when it is called like this.


#10

Using the quotes worked - thank you!! What would be the process for reporting the typo - is it at https://github.com/meteor/meteor/issues ?


#11

Yeah, that looks like a typo in the docs, easily done in this situation, the checked attribute was always confusing.

It’s probably worth raising an issue just because this section of the readme is so specific about how to format things that it makes it extra confusing when the example is wrong. And yes, meteor/issues with a link to the page would be best I reckon.


#12

I hate to bring this back up, but I’m having the same issue as the OP. I have values stored as true or false, and I need / want to show them as checked or unchecked checkboxes in my UI.

I can now make the checkbox check or uncheck using a helper and statically returning true or false. But if I just use the value in the UI my checkbox is always checked. My value key is ‘selected’. So in the UI if I do

<input type="checkbox" checked="{{selected}}" >

then it is always checked, but I know only 1 out of 7 values for selected show ‘true’ when I just put

{{selected}}

in my UI directly.

I have created a helper called ‘isSelected’ as follows:

Template.getRecipientsandGift.helpers({
    isSelected: function() {
        if (selected === "true") {
            return true;
        } else {
            return false;
        }
    },
});

This does not work with

<input type="checkbox" checked="{{isSelected}}" >

I get an error from chrome dev console.

“Reference error: selected is not defined.”

So, where am I going wrong.

I’m using a helper on a different template to pull back all my values from the collection, but when I try to put the isSelected in that helper section I don’t get anything returned.

Any help, as always is appreciated.


#13

Nevermind! Got it. Good old trial and error. (mostly error I suppose).

Template.getRecipientsAndGift.helpers({
    isSelected: function() {
        if (this.selected === "true") {
            return true;
        } else {
            return false;
        }
    },
});

That little ‘this’ makes a big difference.