Angular 5 - Disabling Radio Buttons

Question

I have a radio button group in Angular 5. I want to disable some options, using the [disabled] attribute. However, I am noticing only the first radio button actually gets disabled. See my plunker: http://plnkr.co/edit/JzFmvjUyvhPdTkbYT1YZ?p=preview

Even if I hard code [disabled]="true", it still doesn't disable the second radio button. I don't want to switch to using a <select>, so I am curious if there is another way to get this to work with radio buttons.

are you using template driven forms? reactive forms? no forms at all? — Osman Cea, Nov 21 '17 at 18:19
Just related when calling methods in template... https://stackoverflow.com/questions/37876533/ngfor-running-an-infinite-loop-in-angular2 — AT82, Nov 21 '17 at 18:45
I added a brief explanation and a solution to the problem. I hope that it help. — Mohamed Gara, Nov 21 '17 at 21:51

score 39 · Answer 1 · answered May 21 '18 at 19:01

There can be 2 solutions for this :-

1. Using the disabled attribute ([attr.disabled])

One solution to this problem can be using the disabled attribute ([attr.disabled]) instead of the disabled property ([disabled]), but [attr.disabled] works slightly differently, to enable the radio button you need to pass null to [attr.disabled] and any non-null value to disable it. Consider the below example :-

<input type="radio" name="enabled" [attr.disabled]="null" />Enabled1
<input type="radio" name="enabled" [attr.disabled]="null" />Enabled2

<input type="radio" name="disabled" [attr.disabled]="false" />Disabled1
<input type="radio" name="disabled" [attr.disabled]="false" />Disabled2

In this example the set of radio buttons named "enabled" will be enabled since for them [attr.disabled] is set to null, whereas the set of radio buttons named "disabled" will be disabled despite the [attr.disabled] being set to "false" this is because false is a non-null value.

2. Using fieldset tag

Another even better solution for this problem is using the <fieldset> tag for grouping the radio buttons together and then setting the [disabled] property on that <fieldset> tag instead of individual radio buttons. Below is an example for the same :-

<fieldset [disabled]=true>
    <input type="radio" name="test" />yes
    <input type="radio" name="test" />no
</fieldset>

the fieldset trick is just awesome I love html – Fyodor Aug 31 '21 at 08:40 — Fyodor, Aug 31 '21 at 08:40

Abhishek Gautam · Answer 2 · 2021-06-23T08:07:13.843

7

Use this : (for reactive form approach)

 <input
    type="radio"
    id="primaryIPV6"
    value="2"
    [attr.disabled]="flagValue ? '' : null"
    formControlName="p_ip_type"
    (change)="optionalFn()">

Set flagValue programmatically from .ts class:

use -> null : false (null would be interpreted as false ) use -> true/'' : true (true or simply blank would be interpreted as true)

edited Jun 23 '21 at 08:07

answered Jan 31 '19 at 13:55

Abhishek Gautam

1,617
3
18
29

This answered worked correctly, seems the proper approach, Thanks ! @abhishek I am still new to reactive, is this the recommended way for reactive forms ? – Bhargava Sep 01 '20 at 18:33
Yes, indeed. Please upvote my answer if this helped you in your work :) – Abhishek Gautam Sep 02 '20 at 04:15

DrNio · Answer 3 · 2017-11-21T18:36:33.660

6

It works fine like this [attr.disabled]="isDisabledState === true"

And in the component class you can have isDisabledState: boolean = true

edited Nov 21 '17 at 18:36

answered Nov 21 '17 at 18:31

DrNio

1,936
1
19
25

1

Maybe I am doing something wrong, but that is just setting `disabled="true"` and `disabled="false"`, which is always interpreted as disabled. – Travis Parks Nov 21 '17 at 18:48
I think what @DrNio is getting at is something along the lines like below where you have a property that interprets the true/false condition and then the radio button will be disabled or enabled based on that property. ` Yes No` `export class App { name:string; isDisabled: boolean = true; }` And then you can add in a function to toggle `isDisabled` state – HoppyScoot Nov 21 '17 at 19:03
using [attr.disabled]="" instead of [disabled]="" worked for me. This also worked in the context of a *ngFor. – Mark Apr 25 '18 at 19:26
[attr.disabled]="some_expression" worked for me. Thank you...been banging my head on this one for a bit... – swandog Jul 27 '23 at 19:15
One more note...[attr.disabled]="isReadOnly === true ? true : null" is needed to toggle the disabled of the radio button... isReadOnly is defined in my .ts file – swandog Jul 27 '23 at 19:41
@swandog then you can upvote :) – DrNio Jul 28 '23 at 04:46

Mohamed Gara · Answer 4 · 2017-11-21T21:38:05.800

6

One way to deal with the problem is to place the disabled binding on the last radio button in the group. Here is a modified version of your code: http://plnkr.co/edit/v6S5G7Do5NAMKzZvNdcd?p=preview

<input type="radio" name="answer" value="Yes" [(ngModel)]="name" /> Yes
<input type="radio" name="answer" value="No" [(ngModel)]="name" [disabled]="isDisabled()" /> No

There is a bug and a design problem in disabling (using [disabled]) Angular template driven radio buttons.

I fixed the bug in this pull request: https://github.com/angular/angular/pull/20310

The design problem is that we put the [disabled] binding on a single radio button, but it's all the group that is affected by the data binding. Here is a modified version of your code that illustrate the problem: http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview

edited Nov 21 '17 at 21:38

answered Nov 21 '17 at 21:19

Mohamed Gara

2,665
3
13
19

There's nothing to prevent someone from putting a separate disabled condition on each radio button and you should be able to disable some options and not others. In my real-world scenario, I have radio buttons for Approve and Reject and in some cases one or the other should be disabled, maybe both. That said, I understand the challenge for a JavaScript library to uniquely identify radio buttons with the same name. – Travis Parks Nov 22 '17 at 12:13
So in your case [disabled] will not work (here an example http://plnkr.co/edit/3yRCSPsdjXqhUuU9QEnc?p=preview). The solution is to use [attr.disabled]. – Mohamed Gara Nov 22 '17 at 18:40

score 1 · Answer 5 · answered Nov 22 '17 at 12:24

I ended up cheating. Instead of using the same name for both radio buttons, I gave each radio button a unique name and bound them to the same backing field. http://plnkr.co/edit/zNbODcAqZMgjXfluxhW6?p=preview

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="radio" name="answer1" value="Yes" [(ngModel)]="name" [disabled]="isDisabled1()" /> Yes
      <input type="radio" name="answer2" value="No" [(ngModel)]="name"  [disabled]="isDisabled2()" /> No
    </form>
  `,
})
export class App {
  name:string;
  isDisabled1(): boolean {
    return false;
  },
  isDisabled2(): boolean {
    return false;
  }
}

Since they are both bound to the same backing field, they end up being mutually exclusive, behaving the way radio buttons should. It also allows them to be independently disabled.

In my real-world scenario, I actually only did one-way binding with (click) events to set the bound value, but it's the same trick.

If you later add validators on your radio buttons you will have problems because there are two FormControl. For example you will not be able to check if a value is selected. — Mohamed Gara, Nov 22 '17 at 18:49

score 1 · Answer 6 · answered Mar 25 '19 at 06:42

1

I was working with ionic and the following works for me.

<ion-radio class="fix-radio_button" *ngIf="!IsSuspended" color="default" [disabled]="q.QuestionOptionId==q.AnswerId" [checked]="q.QuestionOptionId==q.AnswerId"></ion-radio>

answered Mar 25 '19 at 06:42

Muhammad Awais

4,238
1
42
37

Ankit Kapoor · Answer 7 · 2017-11-21T19:36:06.070

0

Considering DrNio answer you should use attr.disabled and set value as [value]="'Yes'". This is because assigning as "Yes" makes angular to evaluate it as an expression instead of just a value.So your input element would be :

<input type="radio" name="answer" [value]="'Yes'" [(ngModel)]="name"   [attr.disabled]="isDisabled()"  />

edited Nov 21 '17 at 19:36

answered Nov 21 '17 at 19:15

Ankit Kapoor

1,615
12
18

have you checked his plunker url ? with the same function call one radio button is disabled and the other one not (on init of the app - without clicking anywhere) – DrNio Nov 21 '17 at 19:20

Vasim Hayat · Answer 8 · 2017-11-22T13:42:02.353

0

Here is your updated running code and punker..

Update Plunker

@Component({
  selector: 'my-app',
  template: `
    <form>
      Hello {{name}}!!!
      <input type="checkbox" name="dus" [(ngModel)]="isDisabled">
      <input type="radio" name="answer" value="Yes" [(ngModel)]="name" [disabled]="isDisabled" /> Yes
      <input type="radio" name="answer" value="NO" [(ngModel)]="name"  [disabled]="isDisabled" /> No
    </form>
  `,
})
export class App {
  name = 'Yes';;
  isDisabled = true;
}

edited Nov 22 '17 at 13:42

answered Nov 21 '17 at 21:01

Vasim Hayat

909
11
16

isDisabled:true; should be isDisabled=true; – Mohamed Gara Nov 21 '17 at 21:49

score 0 · Answer 9 · edited Jan 04 '23 at 17:41

If you want to disable a specific radio button of angular material which is in a loop, you can do this based on specific condition. This can be done like this, using the disabled attribute of the radio group:

In HTML:

<mat-radio-group>
    <mat-radio-button value="1" 
        [disabled]="name === 'welcome' ? false : true" 
        *ngFor="let name of names;">
        {{ name }}
    </mat-radio-button>
</mat-radio-group>

In .ts file:

public names = [
    'welcome',
    'computer',
    'keyboard'
]

score 0 · Answer 10 · answered Mar 30 '23 at 04:24

0

[attr.disabled]

it basically works on two basis

When we use [attr.disabled]="null", in this case, it will enable radio
When we use [attr.disabled]="true", in this case it will disable radio

answered Mar 30 '23 at 04:24

CHETAN SHARMA

1

Angular 5 - Disabling Radio Buttons

10 Answers10