Angular2 - Prevent Checkbox from being checked

Question

I have a table that contains a checkbox per row. In the table header, I have a Check All checkbox that toggles all of the table row boxes.

I am trying to implement some logic to where if the count of checkboxes are going to exceed a specific limit, show an error and don't toggle the table row checkboxes OR the checkall box itself.

There is an issue that is allowing the checkAll box to get checked, even though I am returning false. Issue with my binding?

HTML:

<input type="checkbox" name="checkAll" [(ngModel)]="checkedAll" (ngModelChange)="toggleAllEmployees($event)">

Component:

toggleAllEmployees(flag) {

    const temp = [];

    if (flag) {

        // If selecting all of these passes the max, throw an error
        if (this.importResults.length > this.maxSelection) {

            /* This is where I get to when I display the error message */
            alert('The number of employees you are trying to select (' + this.importResults.length + ') exceeds the max limit.');
            return false;

        } else {
            for (let i = 0; i < this.importResults.length; i++) {
                if (this.importResults[i].OnTempAssignment !== 'True') {
                    this.importResults[i].checked = true;
                    temp.push(this.importResults[i]);
                }
            }
            this.employeeSelection = temp;

            // Emit our changes
            this.selectedEmployees.emit(this.employeeSelection);

        }
    } else {
        //The else statement just un-checks all the boxes.
    }
}

Although none of the table row check boxes get checked, and the error is shown appropriately, the box I am clicking on still gets toggled.

I assumed that the return false; would have prevented that but I guess not. Is there something wrong with my binding that is allowing it to be toggled anyway?

@AravindI did and that also did not work. $event is only sending a true/false bool though, not an actual event object. — SBB
– SBB, Commented Aug 17, 2017 at 4:47

Pengyy · Accepted Answer · 2017-08-17 05:33:12Z

34

ngModelChange is fired when value binded to checkbox has changed, it's late for stop the toggle operation.

Here you should bind with click event. Then you can use $event.preventDefault() to stop checkbox from been toggled.

You can event add some logic before $event.preventDefault() to determin whether the checkbox should be prevent from changing status.

see Plunker demo.

answered Aug 17, 2017 at 5:33

Pengyy

38.3k15 gold badges85 silver badges73 bronze badges

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

Comments

Bharat chaudhari · Accepted Answer · 2020-07-02 07:29:23Z

9

HTML

 <input type="checkbox" [checked]="isChecked" (click)="onClick($event)">

Code

onClick(e){
  e.preventDefault();

 // In my case, I'm using the popup.
 // so once user confirms then hits api and update checkbox value.
 this.isChecked = true;
}

answered Jul 2, 2020 at 7:29

Bharat chaudhari

5346 silver badges7 bronze badges

Comments

Bashir Saidi Wamula · Accepted Answer · 2022-03-22 13:34:14Z

0

I achieved a similar problem but check if the limit has reached then prevented the default preventDefault() and stopped stopPropagation()

<input type="checkbox" class="message-checkbox mr-2" (click)="stopCheckingStates($event)"
                        (change)="stateChange(state, $event)" [checked]="isStateChecked(state.id)">

then in the ts file

    stopCheckingStates(event){
    this.stopCheckingCheckBox(event, 1);
  }

  stopCheckingCheckBox = (event, limit) => {
    if (selectArray.length > limit) {
      if (event.target.checked) {
        event.preventDefault();
        event.stopPropagation();
      } else {

      }

    }
  }

so you can set your limit as required for my case its was one

answered Mar 22, 2022 at 13:34

Bashir Saidi Wamula

1371 silver badge8 bronze badges

Collectives™ on Stack Overflow

Angular2 - Prevent Checkbox from being checked

3 Answers 3

Comments

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related