Repository navigation
The [disabled] binding does not work for multiple radio inputs #18206
Description
I'm submitting a...
[ ] Regression (a behavior that used to work and stopped working in a new release)
[x] Bug report
[ ] Feature request
[ ] Documentation issue or request
[ ] Support request => Please do not submit support request here, instead see https://github.com/angular/angular/blob/master/CONTRIBUTING.md#question
Current behavior
When utilizing the ngModel directive to bind to several <input type="radio"> elements in a group, the [disabled] property is only honored for the first radio input element occurrence. For example, if we build out a template with a collection of options, binding values to each element - the first input element correctly honors the disabled value - whereas all remaining input elements do not. As a result of this a user can actually change the value by selecting a different option, as they are incorrectly enabled.
The issue is clearly demonstrated as part of this Plunker.
Expected behavior
Currently if I am to bind to [attr.disabled] instead, this works correctly. However, I would expect that the [disabled] property binding would honor the disabled value for all inputs that are bound to it.
Minimal reproduction of the problem with instructions
https://plnkr.co/edit/Qpz9exOxFSP6aFHMiAh7?p=preview
What is the motivation / use case for changing the behavior?
The motivation to fix this bug is that the documentation specifically instructs consumers of angular to use the [disabled] property binding to leverage its consistency and that the value matters.
Adding and removing the disabled attribute disables and enables the button. The value of the attribute is irrelevant, which is why you cannot enable a button by writing <button disabled="false">Still Disabled</button>.
Setting the button's disabled property (say, with an Angular binding) disables or enables the button. The value of the property matters.
Environment
Angular version range: 2.0.0-4.3.0
Browser:
- [x] Chrome (desktop) version 59.0.3071.115
- [ ] Chrome (Android) version XX
- [ ] Chrome (iOS) version XX
- [x] Firefox version 53.0.3
- [ ] Safari (desktop) version XX
- [ ] Safari (iOS) version XX
- [x] IE version 11.0.9600.18697
- [ ] Edge version XX
For Tooling issues:
- Node version: XX
- Platform:
Others:
Activity
[-]The `[disabled]` binding does not work for multiple radio inputs[/-][+]The [disabled] binding does not work for multiple radio inputs[/+]trotyl commentedon Feb 19, 2018
Duplicate of #11763
RezDev94 commentedon Aug 12, 2018
Well, that's because they both has the same name. and I think that's not allowed for text fields in form.
jedsmith13 commentedon Jul 3, 2020
I would like to add that
[attr.disabled]works for multiple radio inputs in a group but[disabled]only works on the first input. I assume it is something like @RezaT1994 said about them sharing a name. This seems to make sense as [disabled] is a form control while [attr.disabled] can be used on any HTML element.Not sure if that helps any with the triage of the bug but it does provide a workaround that should work for my case and probably most use cases.
AndrewKushnir commentedon Aug 13, 2020
FYI, I was able to reproduce this issue with the recent versions of Angular packages (link to Stackblitz).
AndrewKushnir commentedon Nov 17, 2020
Hi, it looks like the root cause of this issue is the same as #35309, so I'm closing this ticket (so all relevant issues are grouped in #35309). Thank you.
angular-automatic-lock-bot commentedon Dec 19, 2020
This issue has been automatically locked due to inactivity.
Please file a new issue if you are encountering a similar or related problem.
Read more about our automatic conversation locking policy.
This action has been performed automatically by a bot.