在 BootStrap 模式中无法选中单选框和复选框

Question

我有一个 bootstrap 模态，它需要同时具有单选框和复选框，当我将以下代码放在模态之外时，它们会按预期工作，但是一旦我将它们移入模态我无法 check/choose 他们..我正在使用 Bootstrap v. 4.6.0.

单选按钮代码：

<div class="form-check form-check-inline">
 <input class="form-check-input" type="radio" name="Pension" id="PensionYES" value="yes" CHECKED>
 <label class="form-check-label" for="PensionYES">Ja</label>
</div>
<div class="form-check form-check-inline">
 <input class="form-check-input" type="radio" name="Pension" id="PensionNO" value="no">
 <label class="form-check-label" for="PensionNO">Nej</label>
</div>

我确实找到了一个有效的 hack，使用 jQuery，但是当 CHECKED 被预设时它不起作用，而且我不确定它在提交表单时是否有效（如果选择的值被传输) .. 最后我认为这是一种奇怪的行为，我不需要使用 jQuery 来工作。

临时黑客：

<script>
jQuery(".modal input:checkbox,.modal label").on("click", function(e)
{
    e.stopImmediatePropagation();
    var element = (e.currentTarget.htmlFor !== undefined) ? e.currentTarget.htmlFor : e.currentTarget;
    var checked = (element.checked) ? false : true;
    element.checked = (checked) ? false : checked.toString();
});
jQuery(".modal input:radio,.modal label").on("click", function(e)
{
    e.stopImmediatePropagation();
    var element = (e.currentTarget.htmlFor !== undefined) ? e.currentTarget.htmlFor : e.currentTarget;
    var checked = (element.checked) ? false : true;
    element.checked = (checked) ? false : checked.toString();
});
</script>

谁能帮忙解决这个问题？ :-)

此致

斯蒂格

Answer 1

在我的 2.024 行长页面代码中测试了 4-5 天后，我终于找到了为什么其他复选框、收音机和 HREF 在页面中不起作用的原因..原因：该死的 JavaScript .. 这是阻止鼠标交互的原因：

<script>
  $(document).on("click", ".show", function() {
    $(this).closest("tr").next().toggle();
    return false;
  });
</script>

在 BootStrap 模式中无法选中单选框和复选框

Radio and checkbox cannot be checked when inside BootStrap Modal

jquery

bootstrap-modal

bootstrap-4