如何使复选框的行为类似于角度 6 中的单选按钮？

Question

我有一组复选框，还有一个新添加的复选框。如果选中了该组中的任何复选框，我想禁用添加的复选框，如果选中了新复选框，则禁用该复选框组。我尝试过这样的事情：

<td *ngFor="let value of GroupRequestDesc;let $index=index " class="col-sm-6" style="padding-right: 15px;">
    <label for="checkbox_group2" class="checkbox cb_pad" style="width: 180px;display:inline-block;">
        <input id="checkbox_group2" class="checkbox1" type="checkbox" [checked]="checkbox1" value="{{value.ReqGroupId}}" [disabled]="value.ReqGroupDesc == ReqGroupDesc || ReqGroupName == 'SERVICE_ACCESS_GROUP'" (change)="checkboxVisibility(value.nxReqGroupId,$event)" /><i class="skin"></i><span>{{value.nxReqGroupDesc}}</span>
    </label>
</td>
<td>
    <label for="checkbox_group3" class="checkbox cb_pad" style="width: 180px;">
        <input id="checkbox_group3" class="checkbox2" type="checkbox" value="" [checked]="checkbox2" [disabled]="requestGroupName =='SERVICE_ACCESS_GROUP'" /><i class="skin"></i><span>Create New Group</span>
    </label>
</td>

检查复选框的功能是否被选中

checkboxVisibility(value, event) {
    if (event.target.checked) {
        console.log('hi its checked');
        this.checkedList.push(value);
        console.log('hhhhhhhhhhhhhhh', this.checkedList);
    } else {
        for (var i = 0; i < this.groupvalues.length; i++) {
            if (this.checkedList[i] == value) {
                this.checkedList.splice(i, 1);
            }
        }
    }
}

复选框组和新添加的复选框应该表现得像单选按钮。

Answer 1

如果您需要将收音机的外观更改为复选框，只需插入此样式：

input[type="radio"] {
  -webkit-appearance: checkbox; /* Chrome, Safari, Opera */
  -moz-appearance: checkbox;    /* Firefox */
  -ms-appearance: checkbox;     /* not currently supported */
}