I'm working on a web application that users use to approve a bunch of items from a list. Imagine, say, an expense report that someone has to approve every item that's listed.
Currently, the system features a button with a checkbox on each row. The checkbox is unchecked when it hasn't been approved yet, and clicking the button checks the checkbox, marking that row approved.
For various legacy reasons (performance being one), the whole page has a save button at the bottom. So here's the problem - there isn't any visual difference between a row that has been saved and a row that hasn't been saved. This has resulted in a lot of users who have pressed "approve" and never get around to saving the page.
And finally my question: how would you change a control like this to indicate that it still needs to be saved? Or, is there another method that's less weird than a checkbox-in-a-button that might work here?
download bmml source – Wireframes created with Balsamiq Mockups
I know there are similar questions already around showing data needs to be saved in a row, but I think this is a different case as you aren't really editing the content of each row - it's the approve control that's being changed.