单选按钮不会在引导 btn-group 中选择 [英] Radio button won't select in bootstrap btn-group

问题描述

我有以下单选按钮组

<label class="btn btn-default active"><input data-val="true" data-val-number="Ability 字段必须是数字.data-val-required="此字段为必填项" id="Ability" name="Ability" type="radio" value="4"><span class="image-label">4</span><label class="btn btn-default"><input id="Ability" name="Ability" type="radio" value="3"><span class="image-label">3</span><label class="btn btn-default"><input id="Ability" name="Ability" type="radio" value="1"><span class="image-label">1</span><label class="btn btn-default"><input checked="checked" id="Ability" name="Ability" type="radio" value="0"><span class="image-label">0</span>

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

.btn-group-vertical .btn input[type=radio] {显示:初始；}

单击标签或 btns 时，会按预期检查收音机...但单击收音机时，会突出显示 btn 并且按预期未检查收音机.如何让收音机在点击时检查?

我使用的是 bootstrap.js v3.0.0

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

有人可以提出解决方法吗?

解决方案

据我所知，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);});

工作引导

I have the following radio button group

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

With css to show the radio buttons that are normally hidden

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

When clicking the labels or btns, the radio is checked as expected... but when clicking the radio, the btn is highlighted and the radio is not checked as expected. How do I make the radios check on click?

I'm using bootstrap.js v3.0.0

Edit: I found this relevant issue https://github.com/twbs/bootstrap/issues/14137

Can anyone suggest a workaround?

解决方案

As far as I know, the bootstrap button.js is just for visual effects and not for the form logic.

But you can use a simple jQuery function to change this.

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

Working bootply

这篇关于单选按钮不会在引导 btn-group 中选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！