Angular2 enable/disable radio inputs in table when checked/unchecked

Question

I've created a table where the priority of top 3 rows are set by using radio buttons. Goal is to make the siblings radio buttons enabled/disabled when checked/unchecked. I'm able to get the buttons checked/unchecked vertically by providing the same name on each row but I'm not being able to do that to it's siblings horizontally.

I've tried using ([attr.disabled]="boolean") on input element but that disables all the buttons in the table. I also tried doing it with javascript but it makes the code really long which is still not perfect.

If anyone could help !!

Below is my code.

HTML

<tr *ngFor="let news of newss">
<td>{{ news.newstitle }}</td>
<td>{{ news.newsdescription }}</td>
<td>{{ news.display }}</td>
<td>{{ news.status }}</td>
<td><span> {{ news.photo }}</span></td>
<td>
  <div class="radio">
    <label><input type="radio" name="priority1" #priority1 
  (change)="handleChange($event, news, priority1)" 
  [attr.disabled]="disprior1" /></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="priority2" #priority2 
  (change)="handleChange($event, news, priority2)" 
  [attr.disabled]="disprior2" /></label>
  </div>
  <div class="radio">
    <label><input type="radio" name="priority3" #priority3 
  (change)="handleChange($event, news, priority3)" 
  [attr.disabled]="disprior3" /></label>
  </div>          
</td>
</tr>

TS:

   handleChange(evt, news, priority) {
      let target = evt.target;
      if (target.checked) {
        if (priority.name == "priority1") {
          this.disprior2 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority2") {
          this.disprior1 = true;
          this.disprior3 = true;
        } else if (priority.name == "priority3") {
          this.disprior1 = true;
          this.disprior2 = true;
        }
      } 
    }

I'm not sure I understand what you want to do, first you are using radio buttons instead of checkboxes, and you are talking about unchecking and checking them. Also you want to disable all other rows when clicking on one row, or what do you want? :) — AVJT82
– AVJT82, Commented Aug 10, 2017 at 15:48

Raed Khalaf · Accepted Answer · 2017-08-08 07:43:32Z

1

<tr *ngFor="let news of newss; let i = index">
<td>{{ news.newstitle }}</td>
<td>{{ news.newsdescription }}</td>
<td>{{ news.display }}</td>
<td>{{ news.status }}</td>
<td><span> {{ news.photo }}</span></td>
<td>
  <div class="radio">
    <label>
       <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/>
    </label>
  </div>
  <div class="radio">
    <label>
       <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/>
   </label>
  </div>
  <div class="radio">
    <label>
        <input type="radio" [name]="'priority' + i" (change)="handleChange($event, news)"/>
    </label>
  </div>          
</td>
</tr>

you can simply declare the index in *ngFor and use it to set the [name] attribute for each group of radio buttons.

answered Aug 8, 2017 at 7:43

Raed Khalaf

2,0752 gold badges16 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Jamshed Over a year ago

That would make the group in a row. We need to make the row & column disabled of the checked button.

Dino · Accepted Answer · 2017-08-08 07:53:10Z

May I suggest the use of the following libraries:

PrimeNG

very easy to use and very powerful. I use check boxes in the following way:

<p-checkbox *ngFor="let part of partsLoaded; let i = index"
                        name="group1"
                        label="{{ part }}"
                        value="{{ part }}"
                        [(ngModel)]="selectedParts"
                        (click)="showOrHidePart()"
                        (mouseover)="selectMesh(part, i)"
                        (mouseout)="deSelectMesh(part, i)"
                        [class.active]="i == selectedMeshIndex"
                        [class.no-mesh]="getStyle(part)"
                        [disabled]="getStatus(part)">{{ part }}
            </p-checkbox>

as you can see I disable the check boxes according to the value returned by the function getStatus():

getStatus(part) {
        let selectedMesh = this.meshCollection.find(obj => obj.name === part).object;

        if (selectedMesh) {
            return false;
        } else {
            return true;
        }
    }

You can do something similar for your radio boxes. You can also leverage the use of name property to accomplish your goal. Dino

Collectives™ on Stack Overflow

Angular2 enable/disable radio inputs in table when checked/unchecked

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related