Angular 2复选框preventDefault [英] Angular 2 Checkbox preventDefault

问题描述

我正在制作一个Bootstrap复选框下拉菜单，这些选项包装在处理点击的< a> 标记中，但我也有一个< input type ="checkbox"> 放在a-tag中.

I am making a Bootstrap checkbox dropdown and the options is wrapped in an <a> tag that handles the click, but I also have a <input type="checkbox"> inside the a-tag.

我的问题出现在用户按下实际复选框而不只是< a> 元素时.两者都被单击，并且发生了一些冲突.复选框的选中状态应为倒置状态，而不是相反.

My problem occurs when the user is pressing on the actual checkbox instead of just the <a> element. Both are clicked and some conflict happen. The checkbox checked-state should be inverted but isn't.

在Angular1中，它只是在复选框单击上使用了preventDefault()，但是在我的angular2-test中，它阻止了复选框更新其状态.

In Angular1 it worked to just use preventDefault() on the checkbox-click, but in my angular2-test it stops the checkbox from updating its state.

在我做错事情时需要帮助.

Need help with what I am doing wrong.

<ul>
    <li *ngFor="#option of options">
    <a href="" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
        <input type="checkbox" [checked]="isSelected(option)" (click)="checkboxClick($event)" /> {{ option.name }}
    </a>
  </ul>

柱塞: https://plnkr.co/edit/6D5GQ9mnaMALNnPzf5Na

我希望单击复选框时的行为与单击右边的链接相同.

I want the same behaviour when clicking on the checkboxes as clicking on the links to the right.

推荐答案

您应该选中此项.

https://plnkr.co/edit/jyX1hGNlRk0dNsR0XMXU?p=preview

<ul>
    <li *ngFor="#option of options">
            <a href="#" role="menuitem" tabindex="-1" (click)="setSelected($event, option)">
            <input type="checkbox" [checked]="isSelected(option)" (keyup)="checkboxClick($event)" /> {{ option.name }}
            </a>
     </li>
</ul>

这篇关于Angular 2复选框preventDefault的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！