Problem: If you set a radio button as required using jQuery .attr('required', true) and then try to set it as not required with .attr('required', false), then the radio button will still be required and will prevent the form from submitting -- even though the required property claims to be false! (See jQuery ticket.)

This can be a serious problem when there are radio buttons in your form that you need to toggle between required and optional based on other fields in your form.

required attribute is reporting: ?

required property is reporting: ?

Notes:

Things that work fine:

    1. Try to the form. Observe that the radio button is initially required and correctly prevents the form from submitting.
    1. Set the field's required attribute to false
    2. Try to the form. Observe that the required property was successfully set to false and the form submitted successfully.
  3. This is the workaround to this bug that I am currently using:
    1. Set the field's required attribute to true with plain old JavaScript
    2. Set the field's required attribute to false
    3. Try to the form. Observe that the required property was successfully set to false and the form submitted successfully.

How to reproduce this bug in Firefox:

  1. Set the field's required attribute to true with jQuery
  2. Set the field's required attribute to false
  3. Try to the form. Observe that even though the required property claims to be false, the radio button is still required and incorrectly prevents the form from submitting!!!

Solution?: Use .prop('required', bool) and not .attr('required', bool) (this only works if the attribute didn't have an initial value required="required" to begin with):

  1. Set the field's required property to true with jQuery
  2. Set the field's required property to false
  3. Try to the form. Observe that even though the required property claims to be false, the radio button is still required and incorrectly prevents the form from submitting!!!