We are selling products on our site that are optionally modifiable. I have several dependent fields that are shown only when a dependee field checkbox is 'checked'.

We also have a sidebar block that is updated whenever a dependee field is 'checked'. I'm doing this with some custom jQuery hide() and toggle() functions. In that sidebar block, we want an 'X' that allows the user to remove their modifications. When that 'X' is clicked, I'd like the dependee checkbox to be unchecked and also hide the dependent fields.

Here's what I have so far:

// When the 'X' button is clicked, uncheck the Modification checkbox

While the input (checkbox) does get unchecked, it does not hide the dependent fields as I expected. I've tried several different functions to uncheck the box ( trigger(), click(), attr('checked') ), but no success.

Any thoughts?


stefank’s picture


That should work.This will uncheck the checkbox. Im using the same for radio buttons, where is .form-radio. Not sure if its called checkbox, but you should be able to find it trough source.

// When the 'X' button is clicked, uncheck the Modification checkbox

To hide you should use:

Anyways found out that when you unselect the radio or checkbox, then the dependent field is still shown. Might work in your scenario tho.

Hope it helps

djdevin’s picture

Just wanted to follow up with a solution.

click() won't work because in states.js, they use keyUp() and change()

So for example if you click() a checkbox, it only checks it but does not fire the event that states.js needs. To get around this you have to set the value and then fire a change().

jQuery('#some-checkbox').attr('checked', 1).change();
jQuery('#some-checkbox').attr('checked', 0).change();

For other input elements you might have to try a different event.