单选按钮不起作用。将选择但不选择背景颜色答案

【问题标题】：Radio Button not working. Will select but not background color单选按钮不起作用。将选择但不选择背景颜色
【发布时间】：2019-06-19 04:39:31
【问题描述】：

我正在使用引导程序来创建内联单选按钮。但两者都没有被选中。

我尝试了几件事，例如更改 for 属性、名称。以不同的方式调用引导函数。还尝试从引导函数实际更改 ::before 颜色。

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-inline">
    <label for="rd_Gender" class="col-md-6 col-form-label text-left">
        Gender:<span id="spnGender" style="color:red; display:none;"> *</span>
    </label>
    <div id="rd_Gender" onclick="clearRatings()" class="form-inline d-flex align-items-center">
        <div class="custom-control custom-radio custom-control-inline">
            <label class="custom-control-label female" for="rd_Gender_0">
                <input id="rd_Gender_0" type="radio" class="custom-control-input" name="Gender" value="50" checked="checked" />
                {{calcData.prCalcLabels.lblFemale}}
             </label>
        </div>
        <div class="custom-control custom-radio ml-5 custom-control-inline">
            <label class="custom-control-label male" for="rd_Gender_1">
                <input id="rd_Gender_1" type="radio" class="custom-control-input" name="Gender" value="51" />
               {{calcData.prCalcLabels.lblMale}}
            </label>
        </div>
    </div>
</div>

我希望选择一个或另一个单选按钮。它选择但背景没有改变。

【问题讨论】：

标签： css bootstrap-4 radio-button

【解决方案1】：

 <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">

<div class="form-inline">
    <label for="rd_Gender" class="col-md-6 col-form-label text-left">
        Gender:<span id="spnGender" style="color:red; display:none;"> *</span>
    </label>
    <div id="rd_Gender" onclick="clearRatings()" class="form-inline d-flex align-items-center">
        <div class="custom-control custom-radio">
            <input id="rd_Gender_0" type="radio" class="custom-control-input" name="Gender" value="50" checked="checked" />
            <label class="custom-control-label female" for="rd_Gender_0">                    
                {{calcData.prCalcLabels.lblFemale}}
             </label>
        </div>
        <div class="custom-control custom-radio ml-5">
            <input id="rd_Gender_1" type="radio" class="custom-control-input" name="Gender" value="51" />
            <label class="custom-control-label male" for="rd_Gender_1">
               {{calcData.prCalcLabels.lblMale}}
            </label>
        </div>
    </div>
</div>

【讨论】：