Bootstrap checkbox buttons hidden status after page refresh

[ghost]

I have a form with checkbox toggle buttons (using twitter bootstrap and Rails)

<div class="btn-group" data-toggle="buttons">
  <label class="btn btn-primary">
    <input type="checkbox"> Option 1
  </label>
  <label class="btn btn-primary">
    <input type="checkbox"> Option 2
  </label>
</div>

I click and choose Option 1. Then I refresh the page. When the page is refreshed all the buttons are reset and Option 1 is not selected any more. However if I go ahead and submit the form, Option 1 is sent to the server as if it was selected (checked). Is this a bug? Is this because of something in cookie. If yes, how can I check the cookie and find the ones that should be pressed and the command to change their status to pressed.

I have text fields (<input type='text'>) in the form also. If I write in the text fields and refresh the page, the texts stay. It seems somewhere behind the scenes the state of the buttons stay as checked, too, but on the display I see them as un-checked. Therefore although the checkbox buttons seem to be un-checked when I submit the form they get submitted as checked.

Thanks a lot.

[hnrch02]

Are you using Firefox?

[hnrch02]

If that is the case, this is documented:

Cross-browser compatibility

Firefox persists the disabled state across page loads. A workaround for this is to use autocomplete="off".

[cvrebert]

Although that only mentions disabledness, not checkedness.

[hnrch02]

Yeah, just saw that. Testing out if it is also the case with checkedness.

[hnrch02]

Yes, that is the case. Maybe we should move that callout and change the copy.

[cvrebert]

Should also test Chrome just to verify that this is the Firefox-specific problem.

[hnrch02]

(That is Chrome, FYI)

[mdo]

So we need to update that callout?

[hnrch02]

Yes, because Firefox persists pretty much any form state across page loads, not only disabledness.

[ghost]

Thank you very much for your responses. Yes, I am using Firefox. Let me read the link you sent and see if it works for me. Really appreciate it.

[ghost]

Following worked for me. It resets the buttons after page refresh:

$(document).ready('bootstrap_buttons', function() {
  $('.btn').button('reset');
});

[mdo]

Docs change made, called out all form control states.

[cvrebert]

@mdo Perhaps we should consider actually using autocomplete="off" in those examples?

[cvrebert]

X-Ref: #793