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

Posted 2023-03-13

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

【英文标题】：how to make checkbox behave like radio button in angular 6?

【发布时间】：2020-04-07 16:36:41

【问题描述】：

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

<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);
            
        
    

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

【参考方案1】：

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

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

【讨论】：

Francesco M. 您好，我需要复选框的行为类似于单选按钮。

是的，那么最好只将单选按钮的外观更改为复选框以便您具有相同的行为？

不，我没有相同的行为。我得到了一组复选框，还有新添加的复选框。所以这里的条件就像如果选择了组中的任何复选框，我需要禁用新添加的复选框，如果选择了新添加的复选框，其他应该禁用。