I'm having an issue with a styled checkbox that appears to flip when clicked. Upon user interaction, the checkbox visually flips on the client side, while sending a request to save the change in a database on the server. In case of an error, I need to revert the checkbox back to its original state. The error callback function from the http.post() method would signal if something goes wrong. My question is, how can I reflip the checkbox to its initial position?
Here's the visual representation of the checkbox using the flipable style: https://codepen.io/anon/pen/yXNopJ?editors=1100
Below is an example of the checkbox (one for each month):
<input class="tgl tgl-flip" id="cbJan_{{ s.MFGName }}" type="checkbox" ng-model="s.Jan" ng-change="vm.monthValueChanged(s.MFGName, 'Jan', s.Jan)" />
<label class="tgl-btn" data-tg-off="OFF" data-tg-on="ON" for="cbJan_{{ s.MFGName }}" ></label>
In my JavaScript code, I attempted to use jQuery to dynamically build and check the ID of the checkbox, but it didn't work as expected - no errors were thrown, and the checkbox didn't revert:
function (error, status) {
alertify.delay(0).maxLogItems(3).closeLogOnClick(true).error('Error: ' + error.data.Message + ' <a href="#" class="close-icon"></a>');
var data = JSON.parse(error.config.data);
var name = 'cb' + data.Month + '_' + data.MFG;
console.log(name);
$(name).prop('checked', !data.Value);
// todo: negate data.Value to get the original value and set the checkbox to that state programmatically
}