Question

我有以下单选按钮组

<div class="btn-group btn-group-vertical" data-toggle="buttons">
        <label class="btn btn-default active">
            <input data-val="true" data-val-number="The field Ability must be a number." data-val-required="This field is required" id="Ability" name="Ability" type="radio" value="4">
            <span class="image-label">4</span>
        </label>
        <label class="btn btn-default">
            <input id="Ability" name="Ability" type="radio" value="3">
                 <span class="image-label">3</span>
        </label>
        <label class="btn btn-default">
             <input id="Ability" name="Ability" type="radio" value="1">
             <span class="image-label">1</span>
        </label>
        <label class="btn btn-default">
             <input checked="checked" id="Ability" name="Ability" type="radio" value="0">
             <span class="image-label">0</span>
        </label>
</div>

使用css显示通常隐藏的单选按钮

.btn-group-vertical .btn input[type=radio] {
display: initial;
}

单击标签或btns时，将按预期检查收音机...但是当单击收音机时，btn会突出显示，收音机不按预期进行检查。如何在点击时检查无线电？

我正在使用bootstrap.js v3.0.0

编辑：我发现了这个相关问题 https://github.com/twbs/bootstrap/issues/14137

有人可以建议解决方法吗？

Answer 1

据我所知，bootstrap button.js仅用于视觉效果，而不用于表单逻辑。

但是你可以用一个简单的jQuery函数来改变它。

$('form').on('click', 'label.btn', function() {
  $('form').find('input[type=radio]').attr('checked', false);
    $(this).find('input[type=radio]').attr('checked', true);
});

Working bootply

Answer 2

认为我通过覆盖引导程序事件处理程序

解决了这个问题

 $(document).off('click.bs.button.data-api')
 $(document).on('click.bs.button.data-api', '[data-toggle^=button]', function (e) {
        var $btn = $(e.target)
        if (!$btn.hasClass('btn')) $btn = $btn.closest('.btn')
        $btn.button('toggle')
        if (!$(e.target).is('input:radio')) {
            e.preventDefault()
        }
 })

Answer 3

对我来说，问题是我忘记了将bootstrap的js包含在angular.json中：

"scripts": [
  "node_modules/jquery/dist/jquery.min.js",
  "node_modules/bootstrap/dist/js/bootstrap.min.js"
]

如果它可以使某人免于沮丧。

单选按钮不会在bootstrap btn-group中选择

3 个答案: