CoffeeScript check if a checkbox is checked?

I have some simple CoffeeScript that toggles a div based off of if a checkbox is checked in a Rails form. The CoffeeScript looks like this:

  $("#bill_patient_checkbox").change ->
    $("#billing_address").toggle()

In the form I have a div setup to default to display:none

<%= f.check_box :patient_bill, :id => "bill_patient_checkbox" %>

          <div id="billing_address" style="display:none">
            <%= f.label :Billing_Address, "Billing Address", class: "control-label" %>
            <%= f.text_field :billing_address, :placeholder => '555 W 8th St. Houston, TX 77448', class: "input-large" %></br>
          </div>

This works fine when creating a new record and clicking the checkbox displays the div with the form field and if unchecked hides it. The problem I'm having is when editing a record the checkbox will remain checked but the div is hidden. The only way to change it is to uncheck the checkbox, the div appears, then you can edit the information, and re-check the box.

So what I'm trying to figure out is how to expand my CoffeeScript to say if the checkbox is checked always display the div in addition the toggle functionality.

Please let me know if you have any questions or need more example code.

Easiest option: You could not add the style to the HTML when patient_bill?

More complex but better for caching option:

# Display if already checked
if $("#bill_patient_checkbox:checked")
  $("#billing_address").toggle()

# Toggle on change
$("#bill_patient_checkbox").change ->
  $("#billing_address").toggle()

Ok, so I've tried both. Removing the style reversed the behavior of the checkbox being checked. So without the style in the HTML it will display the billing_address field. When I check the patient_bill checkbox the billing address field disappears.

So on to step #2
Using the above code results in the div being displayed if the box is checked when editing a record, which is great. But when creating a new record checking the check box hides the div instead of displaying it.

Check your logic there. Toggle simply says if it is visible, make it invisible and vice versa. You just want your style tag to match the boolean in your record in either case. Print out the value into the html if you need to.

It should probably look like this:

<div <% if !patient_bill? %>style="display: none"<% end %> >
</div>

Or helpers make this easier sometimes

I see what you're saying about the logic and it makes sense. I tried the following:

<div id="billing_address" <% if !f.patient_bill? %>style="display: none"<% end %> >
            <%= f.label :Billing_Address, "Billing Address", class: "control-label" %>
            <%= f.text_field :billing_address, :placeholder => '555 W 8th St. Houston, TX 77448', class: "input-large" %></br>
</div>

And in doing that I get the following exception raised:
undefined methodpatient_bill?' for #ActionView::Helpers::FormBuilder:0x007fa7e4d24388`

Once I nail this down, I'm going to move this into a helper I think. Just got to figure out the logic and such.

patient_bill? is a method on the object, not the form builder. :)

No, I know that. I tried just patient_bill? and it also threw a nomethoderror. I was just trying it with the form builder as well. The object exists in memory when creating a new record or editing.

If you want to use it through the form, you can use f.object.patient_bill? I generally use the @record that you set in the controller.

Perhaps using jQuery toggleClass method would be helpful here.

$("#bill_patient_checkbox").change ->
    $("#billing_address").toggleClass('hidden') # toggleClass and not just toggle

<div <% unless @record.patient_bill? %>class: 'hidden'<% end %> >
   <!-- Address Fields -->
</div>

.hidden {
  display: none;
}