Bug Tracker

Opened 7 years ago

Closed 7 years ago

#11782 closed bug (fixed)

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

Reported by: TylerRick Owned by: TylerRick
Priority: low Milestone: None
Component: attributes Version: 1.7.2
Keywords: Cc:
Blocked by: Blocking:


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.

Change History (3)

comment:1 Changed 7 years ago by dmethvin

Owner: set to TylerRick
Status: newpending

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?

comment:2 Changed 7 years ago by TylerRick

Status: pendingnew

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

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


    $(':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.

Last edited 7 years ago by TylerRick (previous) (diff)

comment:3 Changed 7 years ago by timmywil

Component: unfiledattributes
Priority: undecidedlow
Resolution: fixed
Status: newclosed

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.

Note: See TracTickets for help on using tickets.