Enabling/Disabling checkbox field with Angular2

Question

I am dynamically rendering the checkbox and combobox fields and performing following functionality:

based on the API response, if the checkbox field appears as selected then combobox appears as enable else it would be disable.
If user select checkbox field then combo box should be enable else disabled

The combo box fields works work for the first case but not working in the second case. The state (enable or disable) cannot changes later on.

Here is my template snippet:

 < tr *ngFor="let widgetAttribute of _preferencesWidget">

 < td *ngFor="let subattribute of widgetAttribute.methods">

 < select *ngIf="subattribute.name == 'Email' && subattribute.type == 'LIST'" id="{{subattribute.name}}Check" class="selectpicker" data-max-options="1" (change)="validateCombo($event)"
                                                            [disabled]="!subattribute.enabled">
                                                                <option *ngFor="let subValue of subattribute.values" value="{{subValue.code}}" [selected]="subValue.code == subattribute.selected">{{subValue.description}}< /option>
                                                            < /select>
 < /td>
< /tr>

The generated id for checkbox is : InformationCheck and for combobox is : pensionMCheck

My component logic is:

 public validateCombo() {

     if (this.pensionCheck) {
         $('#pensionMCheck').prop('disabled', false);
         if ($('#pensionMCheck').val() === 'Y') {
             this.pensionMCheck = true;
         } else {
             this.pensionMCheck = false;
         }
    } else {
         this.pensionMCheck = false;
         $('#pensionMCheck').val('N');
         $('#pensionMCheck').prop('disabled', true);
         $('#pensionMCheck').prop('selectedIndex', 0);
    }

Günter Zöchbauer · Accepted Answer · 2016-12-06 07:32:00Z

1

Bind the checkbox status to a property (isChecked) and bind enabled of <select> to the same property:

<input type="checkbox" [(ngModel)]="isChecked">
<select [(ngModel)]="selectedItem" [enabled]="!isChecked"

edited Dec 6, 2016 at 7:32

answered Dec 6, 2016 at 7:05

Günter Zöchbauer

662k235 gold badges2.1k silver badges1.6k bronze badges

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

5 Comments

Ashish Chauhan Over a year ago

I am able to resolve it. Code is working fine the only problem is that there is duplicate element exists in the DOM tree.

Günter Zöchbauer Over a year ago

What duplicate element? You mean multiple select elements? What problem does it cause?

Ashish Chauhan Over a year ago

No, the the ID that a element is getting dynamically is duplicated with another element.

Günter Zöchbauer Over a year ago

Are you talking about id="{{subattribute.name}}Check"?

Günter Zöchbauer Over a year ago

I don't know. If name is different for each `subattribute, then there shouldn't be duplicates.

Collectives™ on Stack Overflow

Enabling/Disabling checkbox field with Angular2

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related