I'm using a hidden checkbox with a visible label (the color of the label reflects the checkbox's state). The user can click the label to switch the background color of the page, but only if some condition (in my fiddle represented by a checkbox) is met. If the condition gets falsy, the color changes respectively. There also is a [default] button to restore initial condition value.
Check my fiddle below for a working example.
To "block" the checkbox when the condition is false, I use a return statement in the onclick command of the checkbox label. This seems to be working quite fine, except for one case:
- Enter the page; uncheck condition checkbox. Colored background is disabled, correct.
- Click [change color]. Switching colors is rejected, that's fine.
- Now click default; warning says "disabled", which is wrong, because it was already disabled and should be enabled; but the $('checkboxLabel').click(); command didn't change the checkbox's value
So the problem is with the .click() behaviour; it seems checkboxLabelOnclick() returns true (which is correct, as our condition is now true), but the checkbox click is not triggered
function updateCheckbox() {
if ($('checkbox').checked ^ $('condition').checked) {
// checkbox is false before "clicking"
$('checkboxLabel').click();
// checkbox is still false, although it was "clicked"
if (!$('checkbox').checked) {
alert('disabled')
}
}
}
https://jsfiddle.net/0bjy3c2r/3/
Aucun commentaire:
Enregistrer un commentaire