I am attempting to dynamically enable or disable a checkbox in Angular 8 based on a specific value

Question

I am attempting to dynamically enable or disable a checkbox in Angular 8 based on a specific value

My code snippet goes here

I have a List Array called "ktsessions" which contains the following data: ktsessions = [ {"presenter":"Bharath","topic":"Angular","status":"scheduled","emailId":"[email protected]"}, {"presenter":"Sayyad","topic":"Angular","status":"organized","emailId":"[email protected]"},{"presenter":"Kanchan","topic":"APS","status":"scheduled","emailId":"[email protected]"} ];

<tr *ngFor = "let ktsession of ktsessions >

  <td ><input type="checkbox" [disabled]='disabled'></td>
</tr>

Here is the TypeScript code:

getktsession(){   
    this.service.getKtsession().subscribe(data =>{
      console.log('get', data);
      this.ktsessions = data;
      this.ktsessions.find(user => {
     
       if(user.presenter === "Kanchan"){
       this.disabled = true
} else {
this.disabled = false;
}
        
      });
    });
  }

javascript typescript angular8

Answer 1

Answer №1

There seem to be a few issues that need addressing.

```
<tr *ngFor = "let ktsession of ktsessions >
```
- The closing quote after ktsessions is missing.
```
<td ><input type="checkbox" [disabled]='disabled'></td>
```
- Instead of [disabled]='disabled', it should be
```
[disabled]="ktsession.disabled"
```
. Each checkbox instance needs its own disabled property. Using [disabled]='disabled' sets all checkboxes with the disabled property of the component class instance, not individually.
```
this.ktsessions.find(user => {
```
- While Array#find technically works here, Array#forEach is more appropriate for iterating over an array and setting properties on each element.
this.disabled = true and this.disabled = false - Setting the disabled property directly on the component class instance is incorrect. It should be set on each user instance: user.disabled = true or user.disabled = false.

To correct these issues, your template should resemble:

<tr *ngFor="let ktsession of ktsessions">
  <td>
    <input type="checkbox" [disabled]="ktsession.disabled" /> <!-- use "ktsession.disabled" instead of "disabled" -->
    {{ ktsession.presenter }}
  </td>
</tr>

Your subscribe function should be adjusted as follows:

this.getKtsession().subscribe((data) => {
  this.ktsessions = data;
  this.ktsessions.forEach((user) => { // Use forEach instead of find
    if (user.presenter === 'Kanchan') {
      user.disabled = true; // Set user.disabled, not this.disabled
    } else {
      user.disabled = false; // Set user.disabled, not this.disabled
    }
  });
});

See a working example with these changes in this StackBlitz.

Answer 2

There seem to be a few issues that need addressing.

```
<tr *ngFor = "let ktsession of ktsessions >
```
- The closing quote after ktsessions is missing.
```
<td ><input type="checkbox" [disabled]='disabled'></td>
```
- Instead of [disabled]='disabled', it should be
```
[disabled]="ktsession.disabled"
```
. Each checkbox instance needs its own disabled property. Using [disabled]='disabled' sets all checkboxes with the disabled property of the component class instance, not individually.
```
this.ktsessions.find(user => {
```
- While Array#find technically works here, Array#forEach is more appropriate for iterating over an array and setting properties on each element.
this.disabled = true and this.disabled = false - Setting the disabled property directly on the component class instance is incorrect. It should be set on each user instance: user.disabled = true or user.disabled = false.

To correct these issues, your template should resemble:

<tr *ngFor="let ktsession of ktsessions">
  <td>
    <input type="checkbox" [disabled]="ktsession.disabled" /> <!-- use "ktsession.disabled" instead of "disabled" -->
    {{ ktsession.presenter }}
  </td>
</tr>

Your subscribe function should be adjusted as follows:

this.getKtsession().subscribe((data) => {
  this.ktsessions = data;
  this.ktsessions.forEach((user) => { // Use forEach instead of find
    if (user.presenter === 'Kanchan') {
      user.disabled = true; // Set user.disabled, not this.disabled
    } else {
      user.disabled = false; // Set user.disabled, not this.disabled
    }
  });
});

See a working example with these changes in this StackBlitz.

I am attempting to dynamically enable or disable a checkbox in Angular 8 based on a specific value

Answer №1

Similar questions

Exploring THREE.js with VIVE Headset (JavaScript/Browser/WebGL in the Steam Universe)

What is the best way to dynamically add a stylesheet using JavaScript/jQuery?

Refreshing one Partial View Using Another Partial View in TypeScript and angular.js

What could be the reason for the Chrome Javascript console not displaying the function console.log output?

What is causing the unexpected behavior of deferred.resolve in the q manual?

"Error in Node.js and Express: The variable 'next' has not been defined

Is your Angular Bootstrap Modal component failing to function properly?

What should be done if client.sendRequest(req, cursor).then((answer) does not return a response?

Having trouble deciphering the request header value within the REST web API

Encountering difficulties connecting to a local PostgreSQL database hosted on Docker while using TypeORM alongside pgAdmin4

Merge the JSON data with the Node.js/Express.js response

Determine the size of a file in either megabytes or kiloby

Instructions on utilizing interpolation to transfer a value as an argument to a function

Issue with Prettier AutoFormatting in a project that combines TypeScript and JavaScript codebases

How to showcase numerous PDF documents within a ReactJS application

The AJAX POST form consistently submits data from the initial entry in the list

The animation came to a halt after a brief period

Efficient method of delivering cohesive information from database to user without the need for continuous querying

Encountering a blank or 404 error page in React after running npm build - let's troubleshoot where the issue might be

Error occurs in Azure Function Linux Nodejs when trying to use @azure/storage-blob as it cannot read the property 'startsWith' of undefined