Bootstrap 单选按钮在折叠手风琴时不检查 [英] Bootstrap radio buttons do not check when collapsing an accordian

问题描述

我尝试了很多方法来尝试让它发挥作用.我想要做的就是在检查单选按钮时，手风琴内容将相应地关闭和打开，并且按钮将‘检查’".我有这个工作，但按钮不会出现检查 - 请参阅更详细的示例 http://jsfiddle.net/cmE5L

 <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" 选中>信用卡/借记卡</label><label class="radio inline"><input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" href="#card">PayPal/Maestro</label><div class="accordion"><div id="card" class="accordion-body 折叠在"><p>内容</p>

解决方案

只需将您的 .on('click'...) 更改为 .on('change'...)(第 217 行):

$(document).on('change.collapse.data-api', '[data-toggle=collapse]',功能(e){var $this = $(this), href, target = $this.attr('data-target')||e.preventDefault()||(href = $this.attr('href')) &&href.replace(/.*(?=#[^\s]+$)/, '')//条为ie7, option = $(target).data('collapse') ?'切换':$this.data()$this[$(target).hasClass('in') ?'addClass' : 'removeClass']('折叠')$(目标).折叠(选项)});

JsFiddle.

更新

如果您有其他元素，例如 与单选按钮共享此功能，在这种情况下，您需要做的是检查您是否要使用它用于链接、单选按钮或任何您要使用的元素.

更新 2

我的建议是对不同的元素使用相同的函数:

function expand(e) {var $this = $(this), href, target = $this.attr('data-target')||e.preventDefault()||(href = $this.attr('href')) &&href.replace(/.*(?=#[^\s]+$)/, '')//条为ie7, option = $(target).data('collapse') ?'切换':$this.data()$this[$(target).hasClass('in') ?'addClass' : 'removeClass']('折叠')$(目标).折叠(选项)}$(document).on('click.collapse.data-api', 'a[data-toggle=collapse]', expand);$(document).on('change.collapse.data-api','input[type="radio"][data-toggle=collapse]', expand);

JsFiddle

I've tried a lot of things to try and get this to work. All I want to do is "when checking a radio button the accordion content will close and open accordingly and the button will 'check'". I have got this to work but the button wont appear checked - please see for more detailed example http://jsfiddle.net/cmE5L

            <label class="radio inline">
            <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked>Credit / debit card</label>

            <label class="radio inline">
            <input type="radio" name="optionsRadios" id="optionsRadios2" value="option2" data-toggle="collapse" href="#card">PayPal / Maestro</label>

            <div class="accordion">
                <div id="card" class="accordion-body collapse in">
                    <p>CONTENT</p>  
                </div>
            </div>

解决方案

Just change your .on('click'...) into .on('change'...) (Line 217):

$(document).on('change.collapse.data-api', '[data-toggle=collapse]',
    function (e) {
        var $this = $(this), href
          , target = $this.attr('data-target')
            || e.preventDefault()
            || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')
            //strip for ie7
          , option = $(target).data('collapse') ? 'toggle' : $this.data()
        $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
        $(target).collapse(option)
});

JsFiddle.

UPDATE

If you have other elements like <a...> that shares this function with radio buttons, in this case, what you have to do is to check if you are going to use it for links, radio buttons or whatever element you are gona use it.

UPDATE 2

My suggestion to use same function with diferent elements:

function expand(e) {
    var $this = $(this), href, target = $this.attr('data-target')
        || e.preventDefault()
        || (href = $this.attr('href')) && href.replace(/.*(?=#[^\s]+$)/, '')
    //strip for ie7
      , option = $(target).data('collapse') ? 'toggle' : $this.data()
    $this[$(target).hasClass('in') ? 'addClass' : 'removeClass']('collapsed')
    $(target).collapse(option)
}

$(document).on('click.collapse.data-api', 'a[data-toggle=collapse]', expand);

$(document).on('change.collapse.data-api',
    'input[type="radio"][data-toggle=collapse]', expand);

JsFiddle

这篇关于Bootstrap 单选按钮在折叠手风琴时不检查的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！