禁用点击复选框； 让父div处理

Question

I've got a dynamically created form that has a simple list (created within a ngFor) that has:

• A parent div that handles the click: it selects or deselects the current item.
• A checkbox that's a child of that div, that is supposed to show the selected/unselected status of the given item.

If you click the div, everything works as expected, but if you click in the checkbox, nothing really happens. It's like the click in the checkbox collides with the div click, not changing the value at all.

The "cleanest" solution I've found this far, is not a clean solution at all, since I still cannot click in the checkbox, but at least it won't give me this weird functioning. Check it out:

  <div class="popup-elem" *ngFor="let option of selectedCategory?.options" (click)=" option.active = !option.active"
    [ngStyle]="option.active == true 
              ? {'background-color':'aliceblue'} 
              : {'background-color':'white'}">
    <input type="checkbox" [checked]="option.active" style="z-index:550" [disabled]="true">
    {{ option.name }}
  </div>

I tried other stuff with NgModel and so, but this far this is the best I have. I would be happy if, at least, I could trigger the div's click event when clicking the checkbox, but I don't know how to do so.

Any ideas?

Answer 1

If you want to reenable the checkbox and get a proper behavior, you should add a handler for the click event on the checkbox to change the model:

<input type="checkbox" [checked]="option.active" style="z-index:550" (click)="flip($event, option)" />

Add a handler in your controller :

flip($event, option) {
    option.active=$event.target.checked;
}

Answer 2

Okay, I finally found a solution that, while is not fully perfect, works quite well and I'm happy with. It won't allow me to do the select via clicking the parent div, but the end result is almost the same.

  <div class="popup-elem" *ngFor="let option of selectedCategory?.options"
    [ngStyle]="option.active == true 
              ? {'background-color':'aliceblue'} 
              : {'background-color':'white'}">

    <label class="container"> {{ option.name }}
      <input type="checkbox" (change)="option.active = !option.active" [checked]="option.active">
      <span class="checkmark"></span>
    </label>

This way, when I click the checkbox, text or padding of that container, the item gets properly selected. This doesn't really fix the issue that the event delegation gets broken from the parent div to the child checkbox, but by just setting a higher padding, you can actually achieve the same user experience, which is what I wanted.

I hope this is useful for other people who stumble upon this annoying problem!