折叠手风琴时，Bootstrap 单选按钮不检查答案

【问题标题】：Bootstrap radio buttons do not check when collapsing an accordian折叠手风琴时，Bootstrap 单选按钮不检查
【发布时间】：2013-05-16 00:17:10
【问题描述】：

我已经尝试了很多方法来尝试让它发挥作用。我想做的就是“在检查单选按钮时，手风琴内容将相应地关闭和打开，并且按钮将'检查'”。我已经让这个工作了，但按钮不会出现检查 - 请参阅更详细的示例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>

【问题讨论】：

标签： javascript html css twitter-bootstrap

【解决方案1】：

我知道这是一个旧的，但接受的答案是错误的。虽然它有效，但建议的解决方案是更改 Bootstrap 中的核心代码，如果可以避免的话，您不想这样做。

实际问题是原始海报示例中的无效代码。它在无线电输入上使用href="#card"。这不是有效的 html。 Bootstrap 假设当它看到带有 href 的 data-toggle 属性时，您将在链接上使用它，并且您不希望浏览器的默认操作导航到 href，因此它会阻止这种情况。

当您在收音机输入上放置一个 href 时，Bootstrap 会阻止选择收音机的默认操作。使用 Bootstrap 将 data-target="#card" 添加到无线电输入的替代方法，您将不会得到 preventDefault 并且一切都会正常工作。

我创建了一个 updated JSFiddle 并使用有效的 html 来解决问题，但解决问题的相关代码如下

<label class="radio inline">
  <input type="radio" name="optionsRadios" id="optionsRadios1" value="option1" checked data-toggle="collapse" data-target="#card"> Credit / debit card
</label>

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

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

【讨论】：

【解决方案2】：

只需将您的 .on('click'...) 更改为 .on('change'...)（第 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。

更新

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

更新 2

我建议对不同元素使用相同的功能：

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

【讨论】：

非常感谢！辛苦了。
实际上，我确实有这个问题...我确实有其他使用 'collapse' 的事件不适用于 'on.change'，例如
手动输入地址
@TomRudge 你能添加所有在 JsFiddle 中不起作用的东西吗？我会看看它，看看我是否可以给你一个解决方案。
jsfiddle.net/3ByDN“手动输入地址”现在没有展开，但另一部分效果很好 - 真的感谢你！
@TomRudge 我认为您的活动仅适用于单选按钮。如果您的其他可点击元素具有相同的事件并且您使用onclick 事件，您为什么使用e.preventDefault()？这就是为什么从来没有为收音机工作过，我现在已经看到了。删除它，它将适用于所有人。它不适用于链接，因为他的状态永远不会改变，onchange 事件永远不会触发。

【解决方案3】：

代码阻止了单击单选按钮时的默认操作。我从这部分代码中删除了它，它现在可以工作了。

/* COLLAPSE DATA-API
 * ================= */
  $(document).on('click.collapse.data-api', '[data-toggle=collapse]', function (e) {
    var $this = $(this), href
      , target = $this.attr('data-target')
        //removed || 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)
  })

工作示例 http://jsfiddle.net/cmE5L/1/

【讨论】：