Радио кнопка не работает. Выберу но не цвет фона - PullRequest
Новая
       28

Радио кнопка не работает. Выберу но не цвет фона

0 голосов
/ 18 июня 2019

Я использую bootstrap для создания встроенных переключателей. Но ни один не выбирается.

Я пробовал несколько вещей, таких как изменение атрибутов for, name. Вызов функции начальной загрузки по-другому. Также попытался изменить цвет :: 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>

Я ожидаю, что будет выбран один или другой переключатель. Он выбирает, но фон не меняется.

1 Ответ

0 голосов
/ 18 июня 2019 

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