Got it, let's figure out why your checkboxes aren't showing that blue checked state on the edit page even though they're supposed to be selected. This is a common issue, usually tied to either how Rails is rendering the checkbox state or your CSS not targeting the edit page correctly. Here's how to fix it step by step:

1. First, verify the checkbox has the checked attribute in the HTML #

Before diving into CSS, let's make sure Rails is actually marking the checkbox as checked on the edit page. Right-click the checkbox on your edit.html.erb page, select "Inspect", and look at the HTML for the input element. It should have a checked attribute (either checked or checked="checked") if the record's value is true.

If it doesn't have that attribute, the problem is with how you're using Rails' form helpers. Make sure you're binding the checkbox to your model correctly. For example:

# edit.html.erb
<%= form_with(model: @your_model) do |f| %>
  <!-- This will automatically set the checked state based on @your_model.your_attribute -->
  <%= f.label :your_attribute %>
  <%= f.check_box :your_attribute %>
<% end %>

If you're using check_box_tag instead of the form builder, you need to manually pass the checked state as the third argument:

<%= check_box_tag 'your_model[your_attribute]', '1', @your_model.your_attribute %>

Double-check that @your_model.your_attribute is actually returning true for the record you're editing (you can debug this by adding <%= debug @your_model.your_attribute %> to the edit page temporarily).

2. Check if your CSS is targeting the edit page's checkboxes #

If the checked attribute is present but the blue style isn't showing up, your CSS selector is probably only targeting the new form, not the edit form.

For example, if your CSS looks like this (only targeting the new form container):

.new-form-container input[type="checkbox"]:checked {
  background-color: blue;
  border-color: blue;
}

But your edit page's form is in a container with a different class (like .edit-form-container), that style won't apply. Fix this by either making the selector more general or including both containers:

/* General selector that works for all checkboxes */
input[type="checkbox"]:checked {
  background-color: #0d6efd; /* Example blue */
  border-color: #0d6efd;
}

/* Or target both new and edit forms explicitly */
.new-form-container input[type="checkbox"]:checked,
.edit-form-container input[type="checkbox"]:checked {
  background-color: blue;
}

If you're using custom checkbox styling with pseudo-elements (like using a label to simulate the checkbox), make sure your sibling selector matches the HTML structure. For example, if your label wraps the checkbox and text:

<%= f.label :your_attribute do %>
  <%= f.check_box :your_attribute %>
  <span>Your Label</span>
<% end %>

Your CSS should target the checked state like this:

input[type="checkbox"]:checked + span::before {
  background-color: blue;
  /* Adjust other styles like the checkmark color if needed */
}

Use your browser's dev tools to inspect the checkbox when it's checked—look at the "Styles" tab to see if your :checked styles are being applied, or if they're being overridden by more specific selectors.

3. Rule out caching or Turbo issues #

If you've checked the HTML and CSS and everything looks right, try clearing your browser cache (Ctrl+Shift+R or Cmd+Shift+R to hard reload). Sometimes old CSS files get cached and don't update.

If you're using Rails Turbo (formerly Turbolinks), occasionally it can cause styles to not apply correctly on page loads. You can test this by disabling Turbo temporarily for the edit page (add data-turbo="false" to the form or link that leads to the edit page) to see if that fixes it. If it does, you might need to adjust how your CSS is loaded or add a Turbo load event listener to reapply styles if needed.

Final Check #

Once you've made these changes, reload the edit page—your checked checkboxes should now show that blue state just like they do on the new form.

内容的提问来源于stack exchange，提问作者Hakeem Baba