引导自定义复选框或收音机不可点击

Question

为什么这个标记不起作用？

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
<label for="b4qw8"> 8. Возможность бронирования по времени и месту.
</label>
<div class="custom-control custom-radio">
<input type="radio" id="Да" name="b4qw8" class="custom-control-input" value="Да">
<span class="custom-control-label" for="Да">Да
</span>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="Нет" name="b4qw8" class="custom-control-input" value="Нет">
<span class="custom-control-label" for="Нет">Нет
</span>
</div>
<div class="help-block with-errors">
</div>
</div>
<div class="form-group">
<label for="b3qw4"> 4. Вид общественного питания:
</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Ресторан" value="Ресторан"> Ресторан
<label class="custom-control-label" for="Ресторан">
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Кофе" value="Кофе"> Кофе
<label class="custom-control-label" for="Кофе">
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Столовая" value="Столовая"> Столовая
<label class="custom-control-label" for="Столовая">
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Бар" value="Бар"> Бар
<label class="custom-control-label" for="Бар">
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Кофе-бар" value="Кофе-бар"> Кофе-бар
<label class="custom-control-label" for="Кофе-бар">
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Клуб" value="Клуб"> Клуб
<label class="custom-control-label" for="Клуб">
</label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Другое" value="Другое"> Другое
<label class="custom-control-label" for="Другое">
</label>
</div>
<div class="help-block with-errors">
</div>
</div>

https://codepen.io/polopolaw/pen/MWabqzr

我对支票箱也有同样的问题，他们的行为太奇怪了。1,3,4支票箱在第四个问题中不起作用https://regional.tours/#step-3.但是murkup是通过Flask生成的，因此复选框没有区别。

Answer 1

将span转换为label，如下所示。

<label class="custom-control-label" for="Да">Да</label>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<div class="form-group">
<label for="b4qw8"> 8. Возможность бронирования по времени и месту.
</label>
<div class="custom-control custom-radio">
<input type="radio" id="Да" name="b4qw8" class="custom-control-input" value="Да">
<label class="custom-control-label" for="Да">Да</label>
</div>
<div class="custom-control custom-radio">
<input type="radio" id="Нет" name="b4qw8" class="custom-control-input" value="Нет">
<label class="custom-control-label" for="Нет">Нет</label>
</div>
<div class="help-block with-errors"></div>
</div>
<div class="form-group">
<label for="b3qw4"> 4. Вид общественного питания:
</label>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Ресторан" value="Ресторан"> Ресторан
<label class="custom-control-label" for="Ресторан"></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Кофе" value="Кофе"> Кофе
<label class="custom-control-label" for="Кофе"></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Столовая" value="Столовая"> Столовая
<label class="custom-control-label" for="Столовая"></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Бар" value="Бар"> Бар
<label class="custom-control-label" for="Бар"></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Кофе-бар" value="Кофе-бар"> Кофе-бар
<label class="custom-control-label" for="Кофе-бар"></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Клуб" value="Клуб"> Клуб
<label class="custom-control-label" for="Клуб"></label>
</div>
<div class="custom-control custom-checkbox">
<input type="checkbox" class="custom-control-input" name="b3qw4" id="Другое" value="Другое"> Другое
<label class="custom-control-label" for="Другое"></label>
</div>
<div class="help-block with-errors"></div>
</div>