I believe the problem is not with your code per se, but how it interacts with the code contained with custom-form-elements.js
It seems that your radio buttons are hidden behind styled span elements, to improve the look and feel of the form. However, from a DOM perspective, the actual element that the user clicks on is not the radio button, but the span element.
The custom-form-elements script does some funky stuff behind the scenes to make it look like the radio button has been selected, but a change
event is never fired on the radio button.
In order to get around this, you'll need to add something like the following to your $(document).ready()
:
$("span.radio").click(function () {
$(this.nextSibling).trigger('change');
});
This will add a click event handler to the span masks that will fire the change event on their corresponding radio buttons. Looking at your HTML, this.nextSibling
always refers to the radio button next to the span.