如何禁用复选框单击以选中至少一个复选框

时间:2017-06-27 06:39:15

标签: angularjs-directive angular2-template angular2-forms

我是angular2的新手,如果只选中了一个复选框,我想禁用复选框取消选中。我的html页面看起来像这样

    <div class="Columns-list-box pull-right">
        <a class="Columns-list" role="button" data-toggle="collapse" href="#collapseExample-check" aria-expanded="false" aria-controls="collapseExample-check">
            Columns <span class="caret"></span>
        </a>
        <div class="collapse Columns-list-items" id="collapseExample-check">
            <ul class="sub-mnu" id="menu-check" aria-labelledby="drop5">
                <li >
                    <label><input #idDiv type="checkbox"  [(ngModel)]= "productIdValue" (change)="mapItems($event)" name="id"  [checked]="defaultCheck"  >Id</label>
                </li>
                <li>
                    <label><input #skuDiv type="checkbox"  (change)="mapItems($event)" [(ngModel)]= "skuDivValue" checked    >SKU</label>
                </li>
                <li>
                    <label><input #shortnameDiv type="checkbox"  (change)="mapItems($event)"  [(ngModel)]= "ShortNameValue"  checked >Shortname</label>
                </li>
                <li>
                    <label><input #identifierDiv type="checkbox"  (change)="mapItems($event)"  [(ngModel)]="identifierDivValue" checked >Identifier</label>
                </li>
                <li>
                    <label><input #identifierTypeDiv type="checkbox" (change)="mapItems($event)" [(ngModel)]="identifierTypeValue" checked>Identifier Type</label>
                </li>

            </ul>
        </div>
    </div>

mapItems(){

if (this.productIdValue || this.skuDivValue || this.ShortNameValue || this.identifierDivValue || this.identifierTypeValue) {

}
else {
  this.defaultCheck = true;
}

}

0 个答案:

没有答案