Question

我正在使用引导程序来创建嵌入式单选按钮。但是都没有被选中。

我已经尝试了几种方法，例如更改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>

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

Answer 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>

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

1 个答案: