How to Disable a Checkbox Based on Conditions in Angular 6

How to disable a checkbox based on conditions in angular 6?

ng-disabled is AngularJS syntax. You can use [disabled] input for disable checkboxes.

<input [disabled]="isDisabled" = type="checkbox" id="Checkbox0" name="cCheckbox0" class="custom-control-input" (change)="checkSelected(checkBox[0].label)">

in .ts isDisabled : boolean;

---

Optional thing

You can use Angular Material for your developments. because it has many advantages. And also it has well defined API.

<mat-checkbox> provides the same functionality as a native <input type="checkbox"> enhanced with Material Design styling and animations.

Angular Material

Angular 6: Disable dynamic checkbox based on condition

I have created a simpliifed demo HERE which can be understood by mass audience.

The main concept here is to maintain an object of options and the corresponding list id which is used to maintain which list option to disable.

No need to pass data between components, just simple object manipulation on the component template to enable/disable checkboxes

Angular Material Checkbox disabled on condition

You can use checked value to disable only unchecked checkboxes

<mat-checkbox *ngIf="option.key === 'vacancy'" (change)="onCheckboxChangeEvent(option.key, value, $event)" 
[checked]="isActiveValue(optie.key, value)" 
[disabled]="vacancyDisabled  && ! isActiveValue(optie.key, value)">
{{ value }}
</mat-checkbox>

How to disable particular dynamic checkbox in angular 6?

You can use a particular object from forEach to modify the property instead of local variable:

for(var i=0;i<array.length;i++)
{
    if(array[i].groupDesc == A || array[i].groupDesc == B || array[i].groupDesc == c || array[i].groupDesc == D)
    {
      array[i].disablecheckbox = true;
    }
}

HTML:

<ng-container *ngFor="let value of array;let i = index;">
    <input type="checkbox" pattern="[0-9]{10}" [disabled]="value.disablecheckbox"  value="{{ value.GroupId }}" /><i class="skin"></i><span style ="width: 150px;">{{ value.groupDesc }}</span>
</ng-container>

Angular 5 disable and enable checkbox based on condition

So the general case of disabling a submit button in the way you're describing would look like:

<button type="submit" [disabled]="someValidationFn()" ...>

and someValidationFn() would, according to the use case you described, contain something like

return UserNames.find(name => { return name.userId === userInput;}));

where userInput is a separate property in the component bound to some user-entered value, presumably via an open text input like

<input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">

But, from the markup snippet you pasted*, I'm not clear that you have that "text" input separate from the radio button group. If the radio button group is meant to have submit actions attached to its individual buttons (it shouldn't), then you're actually guaranteed that the user selection will contain a userId which exists in your UserNames array: the only inputs you're offering are based on the data which came from your service in the first place.

Based on the use case you're describing, I'm not sure why you'd have the radio button group. It sounds like you would just want that text input field with a validation method to make sure that user input does not already exist in the UserNames.

Because I wrote a bunch of abstract snippets there, I thought it might be helpful to show some basic html and js where I put it all together:

// html
<form submit="someSubmitAction()">
  <input name="userInput" [(ngModel)]="userInput" type="text" placeholder="Enter some user id">
  <button type="submit" [disabled]="someValidationFn()">Submit</button>
</form>

// js
/* don't forget your @Component annotation and class declaration -- I'm assuming these exist and are correct. The class definition encloses all the following logic. */
public userInput: string;
public UserNames: any[];
/* then some service method which grabs the existing UserNames on component's construction or initialization and stores them in UserNames */
public someValidationFn() {
    return UserNames.find(name => { return name.userId === userInput;}));
}
public someSubmitAction() { 
    /* presumably some other service method which POSTs the data */
}

*speaking of the snippet you pasted, there are a couple of errors there:
*ngFor="let id of UserNames <-- you won't get an id by referencing into the UserNames array here; you'll get a member of the UserNames array in each iteration -- i.e., you'd get {Name: "John", userId: "23432"}, then {Name: "Smith", userId: "12323"}, and so on. That's not necessarily an error, but I'm assuming that, b/c you used id as your variable name, you were expecting just the userId field. Otherwise you'd have to use {{id.userId}} in each iteration to access the actual id.
And bob.mazzo mentions another issue with the use of the [checked] attribute

Disable other check boxes with [disabled] in Angular 2

This should do it. Of course you could also do this with iteration if you like, but since you have all the checkbox separately I will do that here. Let's create a new method checkSelected that takes the label of the checkbox value which is triggered by (change) event. We set disable for checkboxes when the checked is set as true

<input type="checkbox" [disabled]="checkBox[0].checked" (change)="checkSelected(checkBox[0].label)">{{checkBox[0].label}}
<input type="checkbox" [disabled]="checkBox[1].checked" (change)="checkSelected(checkBox[1].label)">{{checkBox[1].label}}
<!-- The rest of the checkboxes -->

And in your TS let's iterate the array and check which label matches the one chosen. For the other checkboxes, we'll toggle the boolean value checked to true, while the chosen checkbox remains false.

checkSelected(label: string) {
   this.checkBox.forEach(x => {
       if(x.label !== label) {
           x.checked = !x.checked
       }
   })
}

When you uncheck the checkbox, it still remains false, and the other ones become false as well!

And there ya go, all done! :) Here's a Plunker.

Disabling checkbox from multiple conditions

I think issue is with the disabled check condition added for the checkbox. As a suggestion for better maintainability of the code you can create function like canSelectSeats() and use it in the disabled property instead of adding logic inline in html. And the function would return a boolean by checking the condition like below.

In .ts file of the page

canSelectSeats(seats, index):boolean {
 return this.checked < limit && seats.status=='false' && !BusSize.line1[index].check;
}

In html page

[disabled]="canSelectSeats(seats, i)"

*I am not sure about the last line1[index] check condition is for so you can change as you desire.

How to check and disable a checkbox, when other 3 checkbox are checked, in Angular

You can use disable() method of FormControl.

The code should be like the following

In HTML,

<input type="checkbox" formControlName="add" id="add"(change)="isCheckedAdd(i)"/>

In TS,

isCheckedAdd(i: number) {
  const permissionFormControls = this.form.controls.permissionForm as FormArray; // Not sure what the name of FormGroup you are using but I assume it's "form"
  permisionFormControls[i].controls.edit.disable();
  permisionFormControls[i].controls.delete.disable();
}

---

Related Topics