How to only disable checkboxes that are currently checked in Angular 8

click here to view an image**I would like to know how I can disable only the selected/checked items on a p-listbox in Angular 8. Is it possible to achieve this by adding a specific property or using CSS? Currently, when I try to add the [disabled] property, all items in the list are disabled, but I want only the checked items to be disabled.

<div class="ui-g">
     <div class="ui-g-12 ui-md-6 ui-lg-2">
       <label>Fields</label>
     </div>
    <div class="ui-g-12 ui-md-6 ui-lg-6">
     <p-listbox *ngIf="!datasetLoader" [options]="mandatoryField" [(ngModel)]="selectedField" 
           [listStyle]="{'max-height':'150px'}" (onChange)="fieldSelection($event)" multiple="multiple" 
           formControlName="field" checkbox="checkbox" optionLabel="DisplayFieldName">
     </p-listbox>
    </div>
 </div>
angulartypescriptangular8

Answer №1

When using the p-listbox option in Primeng, it is based on the SelectItem interface. Within the SelectItem interface, there is a property called disable which, when set to true, will disable the related option.

Example:

<p-listbox [options]="cars" [(ngModel)]="selectedItems" 
          [listStyle]="{'max-height':'250px'}" multiple="multiple"
    (ngModelChange)="updateItems($event)" checkbox="checkbox">
</p-listbox>

Component Function:

  updateItems(selectedItems:string[]) {
      selectedItems.forEach(v =>{
        let car = this.cars.find( c => c.value === v); 
        car.disabled = true; 
      })
    }

Each time an item is selected, the disable property for that option will be updated to true.

View Demo 🚀🚀

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Setting up Angular Universal on an already existing Angular 2 application with the help of the CLI

Encountering obstacles while trying to integrate the universal CLI into an existing Angular 2 application by following the guidelines provided in this link: During the initial command to install angular-universal: npm install body-parser angular2-univers ...

node.jsangularangular-cliangular-universal

Angular is expecting data of type string or number for the operands provided

When working in VS Code, I encountered the following warning: "Expected operands to be a string or number type" https://i.stack.imgur.com/lULLQ.png The contentType variable is defined as a string. I noticed that when I remove 'data:', every ...

angularvisual-studio-code

Having trouble with Ionic 4 navigation not triggering after a single click, requiring multiple clicks to navigate

I have a long list of items, around 40 in total, that load a page describing each item with photos, URLs, and other content. However, I find that I need to click two to three times before reaching this page. I suspect that the excessive use of HTML compone ...

androidhtmltypescriptionic-framework

Issues arise when attempting to include the src attribute within the template tag in a Vuejs and Laravel project

After starting a project with Vuejs and Laravel using Laravel Mix, I encountered an issue. When attempting to split my component into separate files and load them in the .vue file as follows: <template src="./comp.html"></template> &l ...

laraveltypescriptvue.jswebpacklaravel-mix

What is the best way to transfer image files into a specific folder?

I am currently in the process of developing a ReactJS web application. My goal is to upload images to a specific folder and then store the file name in the database for future use. Everything seems to be working smoothly up to this point, but I am facing ...

reactjstypescriptasp.net-core

Error: Protractor encountered an unexpected token while trying to import an external class

While working on my Protractor test, I encountered a syntax error on import when trying to bring an external class into the test. The strange thing is that the error only occurs at runtime, even though I am confident that I am importing and exporting the c ...

typescriptprotractor

Tips on looping through a dynamic FormControl using Angular2 and FormBuilder

I am facing an issue when trying to iterate over a dynamically generated FormControl in the HTML section. Instead of displaying the expected values, I am getting [object Object],[object Object] in the input field. Here is the provided data structure: { ...

angulartypescript

The pairing of Transpiller and Internet Explorer 8 is like a dynamic

In starting my new project, I am considering using BabelJS. However, there is a significant requirement that must be met: it needs to be compatible with IE8. ISSUE: Babel compiles ES6 to ES5, but the support for ES5 on IE8 is lacking. Are there any alter ...

javascriptinternet-explorer-8coffeescripttypescriptbabeljs

The Angular 5 keyup event is being triggered twice

My app is incredibly simple, just a basic hello world. To enhance its appearance, I incorporated bootstrap for the design and ng-bootstrap for the components. Within one of my TS files, you will find the following code: showMeTheKey(event: KeyboardEvent) ...

javascriptangulartypescriptevents

Creating an interface that extends the Map object in TypeScript to maintain the order of keys

After learning that the normal object doesn't preserve key order in TypeScript, I was advised to use Map. Nevertheless, I'm struggling to figure out how to assign values once I've declared the interface. Take a look at my approach: Coding ...

typescript

unable to get ng-model and ng-options to function properly

Can anyone assist me with my issue? I can't figure out why it's not working. I want to generate a select dynamically from the Level[] retrieved from the database <select> <option>1</option> <option>2</option&g ...

angularselectdrop-down-menung-optionsangularjs-ng-options

Angular application table enclosed in a form, failing to capture checkbox values

I am working on an Angular 6 project and have a table with checkboxes. My goal is to select a row in the table by checking the checkbox, then click a "select" button to submit the data. However, my current HTML structure does not seem to be functioning as ...

angular

Strategies for resolving type issues in NextJs with Typescript

In my project using Next.js with TypeScript, I encountered an issue while trying to utilize the skipLibCheck = false property for enhanced checking. This additional check caused the build process to break, resulting in the following error: Error info - U ...

javascriptreactjstypescriptnext.js

Encountering a Typescript error when attempting to access the 'submitter' property on type 'Event' in order to retrieve a value in a |REACT| application

I am facing an issue with my React form that contains two submit buttons which need to hit different endpoints using Axios. When I attempt to retrieve the value of the form submitter (to determine which endpoint to target), I encounter an error while work ...

javascriptreactjstypescriptforms

Can you explain the process of retrieving data from a Material 2 table?

In my Angular 2 application, I am utilizing a Material 2 table to showcase items and their corresponding data. Each row in the table has an edit button on the right side, which triggers the appearance of input fields populated with the values of that speci ...

angularangular-material2

How to avoid property name conflicts when extending interfaces in Typescript

Is it possible to achieve something like this using TypeScript, such as renaming a property? interface Person { name: string age: number } interface Pet { age: string } interface Zoo extends Pet, Person {} How can we prevent this error from ...

typescriptinheritance

Discovering the permissible array values from numerous arrays inside an object using TypeScript

I have an object with multiple arrays of strings (hardcoded). I want to specify that only strings from that object are allowed in another empty array. In a simple non-nested scenario, I'm achieving this with typeof someArray[number][]. So, I hoped to ...

typescript

Tips for adjusting the width of ng2 smart table columns

Here is an example of my three columns, showcasing the ability to customize width sizes. modifyPassword: { title: this.gridTittle["Modify Password"], type: 'custom', renderComponent: UserPasswordChangeComponent, filter: false }, ...

angularng2-smart-table

Is there a way to set up custom rules in eslint and prettier to specifically exclude the usage of 'of =>' and 'returns =>' in the decorators of a resolver? Let's find out how to implement this

Overview I am currently working with NestJS and @nestjs/graphql, using default eslint and prettier settings. However, I encountered some issues when creating a graphql resolver. Challenge Prettier is showing the following error: Replace returns with (r ...

typescriptgraphqlnestjseslintprettier

Issue with displaying tab icons in Ionic 4

After updating the versions of Angular, Cordova, and Ionic, I started experiencing an issue with the tab icons displaying partially. Specifically, when my app loads with 4 tabs, only the first and third icons are visible. However, upon touching one of the ...

angulartypescriptionic-frameworktabsicons