1

It works everywhere else... I'm really not sure how to reason about this.

The code directly below does interpolate the checkedValue, but because there are " " around the checkedValue it keeps the box checked. But I cannot remove the quotation marks or it won't work.

extends layout

block content
  h1.headLine= challenge.title
  p Difficulty: #{challenge.difficulty} #{checkedValue} Points: #{challenge.points} //checkedValue interpolates to true or false
  p= challenge.description
  form(action="/submitChallenge" method="post")
    label(for="challenge1") Mark as Solved!
    input( type="checkbox" id="challenge" checked="#{checkedValue}" name="challenge" value="#{challenge._id}" )
    p #{checkedValue} //interpolates here too, without any " "
    button(type="submit") Submit

The following code just leaves the #{checkedValue} as is without any interpolation. So .. this doesn't work either, even though the #{challenge._id} works just fine!:

input( type="checkbox" id="challenge" "#{checkedValue}" name="challenge" value="#{challenge._id}" )

I've also tried removing the quotes.

Nothing seems to work. Currently the variable is a boolean value, but it doesn't really matter if I can't get it to interpolate!

I've thought about setting it to "checked" or "" for unchecked, but... I still need to get it interpolated.

John Curry
  • 428
  • 1
  • 5
  • 17
  • `checked` is a Boolean attribute, meaning that its presence, not its value, determines the property of the element. As long as it is declared, the checkbox will be checked no matter what value it is set to. To keep a checkbox unchecked, do not declare the `checked` attribute. – Terry Mar 26 '16 at 07:52
  • I know, but that's actually not entirely true. You can have the checkbox UN-checked with checked=false however, checked="false" will check the box. Besides, I want a dynamic checkbox. I've never had any problems with this before. Some pages will have the box checked, and it depends on the user. Why can't I do that? – John Curry Mar 26 '16 at 09:01
  • Are you using a HTML5 doctype? That might be the difference it's making. Also, see: http://stackoverflow.com/questions/7851868/whats-the-proper-value-for-a-checked-attribute-of-an-html-checkbox – Terry Mar 26 '16 at 09:04

2 Answers2

0

In Jade, the checked attribute should use a boolean value and not be interpolated as a string. Also make sure you have doctype html set somewhere in your template. 

doctype html
input(type="checkbox" id="challenge" checked=!!checkedValue name="challenge" value="#{challenge._id}")

With the following data and a falsey value (0, undefined, null or false)

{
  challenge: { _id: 1432513 },
  checkedValue: false
}

Will return 

<!DOCTYPE html>
<input type="checkbox" id="challenge" name="challenge" value="1432513">

And a truthey value

checkedValue: true

Will return 

<input type="checkbox" id="challenge" checked name="challenge" value="1432513">

See the Boolean Attributes section in the Jade documentation and try out the above values in the online demo.

Matt
  • 68,711
  • 7
  • 155
  • 158
0

Try this:

doctype html
input(type="checkbox" id="challenge" value='' + challenge._id)