Переключатели не отображают проверенное состояние при использовании Bootstrap

Question

Когда я просто использую обычную группу переключателей с Bootstrap, как это, без особого стиля, тогда она работает просто отлично:

<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="radio">

        <div class="form-group">
            <label><input type="radio" value="keep">Ändra inte lösenordet</label>
        </div>
        <div class="form-group">
            <label><input type="radio" value="auto">Generera ett nytt lösenord automatiskt</label>
        </div>
        <div class="form-group">
            <label><input type="radio" value="manual">Ange ett nytt lösenord manuellt</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
                   
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Радиокнопки показывают проверенное состояние при нажатии.Но если я попытаюсь стилизовать кнопки, используя класс CSS custom-control, как это:

    <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="radio custom-control custom-radio">

        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="keep">Ändra inte lösenordet</label>
        </div>
        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="auto">Generera ett nytt lösenord automatiskt</label>
        </div>
        <div class="form-group">
            <label class="custom-control-label"><input type="radio" class="custom-control-input" value="manual">Ange ett nytt lösenord manuellt</label>
        </div>
        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
                       
    </div>
    
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

... это не работает.Ничего не происходит, когда я нажимаю на кнопки.Как я могу это исправить?

Answer 1

Выбор пользовательских кнопок радио (и флажков тоже) зависит от конкретной структуры DOM, касающейся label и input, где input должен прийти до label, с label являющийся родным братом (чаще всего понимается с ожиданием того, что label будет смежным родным братом).Это связано с ограничениями CSS.

Это означает, что ваши ярлыки больше не связаны с переключателем, потому что он больше не переносит его.Чтобы это исправить, присвойте переключателям id и добавьте атрибут for="" на метку, содержащую тот же id).

Кроме того, ваши переключатели должны иметь общий name,в противном случае все переключатели можно проверить одновременно.

Чтобы исправить это, внесите следующие изменения:

<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="radio custom-control custom-radio">

  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="keep" id="i1" />
    <label class="custom-control-label" for="i1">Ändra inte lösenordet</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" value="auto" name="i" id="i2" />
    <label class="custom-control-label" for="i2">Generera ett nytt lösenord automatiskt</label>
  </div>
  <div class="form-group">
    <input type="radio" class="custom-control-input" name="i" value="manual" id="i3" />
    <label class="custom-control-label" for="i3">Ange ett nytt lösenord manuellt</label>
  </div>
  <div class="form-group">
    <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
  </div>

</div>

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

Answer 2

Работаю сейчас.Вам просто нужно было добавить id="customRadio" во входные данные и в ваши ярлыки for="customRadio".

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>


    <div class="radio custom-control custom-radio">

        <div class="form-group">
<input type="radio" class="custom-control-input" id="customRadio"><label class="custom-control-label" for="customRadio">Ändra inte lösenordet</label>
     </div>
     
        <div class="form-group">
            <input type="radio" id="customRadio1" class="custom-control-input" value="auto"><label class="custom-control-label" for="customRadio1">Generera ett nytt lösenord automatiskt</label>
        </div>
        
        <div class="form-group">
           <input type="radio" id="customRadio2" class="custom-control-input" value="manual" > <label class="custom-control-label" for="customRadio2">Ange ett nytt lösenord manuellt</label>
        </div>
        

        <div class="form-group">
            <input type="text" class="form-control" class="custom-control-input" name="password" id="password" placeholder="Ange ett lösenord manuellt">
        </div>
        
            
    </div>