Radio buttons set as "required" and then "not required" still act as required and prevent form submit

[TylerRick]

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!

Here is a jsFiddle that reproduces this behavior: ​http://fiddle.jshell.net/TylerRick/RPsXQ/show/

This appears to only be a problem in Firefox (for me). But it also appears to be specific to jQuery.

[dmethvin]

If you're using a Boolean with .attr() the smell of fail is in the air already, since .attr() should only be called with string values. If you want to change the in-memory DOM element property value and not the HTML markup attribute value then .prop() would be the right choice.

I think there should (at the moment) be a boolHook in place to "fix" this but it will be going away soon.

Does the problem appear if .prop() is used consistently?

[TylerRick]

By using .prop() consistently, I assume you mean using this to make the field required or not required:

    $(':input').prop('required', true);

and

    $(':input').prop('required', false);

Yes, that appears to work (where changing with .attr() did not) *if* I remove the initial attribute value required="required" from the HTML itself.

It still does not work, however, if I leave that initial attribute value in there.

I've updated my jsFiddle to reflect that: ​http://fiddle.jshell.net/TylerRick/RPsXQ/show/

It's almost as if doing anything with the 'required' attribute (even if it's setting an initial value in the HTML) is enough to cause .prop('required', false)/.attr('required', false) to no longer work...

What's interesting is that I can change the 'required' attribute directly with plain old JavaScript (.setAttribute('required', 'required')) and both .prop('required', false)/.attr('required', false) will continue to work as expected.

So I guess it's only setting required="required" via the HTML or .attr('required', 'required') via jQuery that causes this to not work as expected.

[Timmy Willison]

This has been fixed. The property was being set to empty string on all radios, which is still true, since the mere presence of boolean attributes indicates true, even if set to false.