<p dir="auto">A friend of mine (<a href="https://github.com/R2-G2">https://github.com/R2-G2</a>) noticed, that there's a strange behavior with radio buttons wrapped into labels:</p>
<p dir="auto">If you click one for the first time, everything's fine. It gets an active class and if you you use the radio-buttons selector with a ':checked' filter via jQuery, it shows that the element is checked (or better said, it finds the element).</p>
<p dir="auto">But if you click it for a second time, the active class stays, but the radio button isn't checked anymore.</p>
<p dir="auto">Here's an example:</p>
<p dir="auto"><a href="http://jsfiddle.net/aMKFq/" rel="nofollow">http://jsfiddle.net/aMKFq/</a></p>
<p dir="auto">The following line in <em>button.js's toggle-method</em> seems to cause the problem:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'type'</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'radio'</span><span class="pl-kos">)</span> <span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'.active'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">Better said, it's not the line, but it's position. The line is removing the active class of the parent, if the input is a radio button, which seems logical, since you don't want a radio button to be deselected and you have a toggle class at the end of the method:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="this.$element.toggleClass('active')"><pre class="notranslate"><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span></pre></div>
<p dir="auto">So, first removing eventually existing active classes and then toggling it, seems useful.</p>
<p dir="auto">The only problem is, that the checked-property is set <em>before</em> the active class is removed:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="if ($parent.length) {
  var $input = this.$element.find('input')
      .prop('checked', !this.$element.hasClass('active'))
      .trigger('change')
  if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')
}"><pre class="notranslate"><span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">$input</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'input'</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'checked'</span><span class="pl-kos">,</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">hasClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">trigger</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">)</span>
  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'type'</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'radio'</span><span class="pl-kos">)</span> <span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'.active'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto"><strong>Possible solution</strong></p>
<p dir="auto">I wrote a solution, which fixed the issue for me, while still allowing every test to pass:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="Button.prototype.toggle = function () {
  var $parent = this.$element.closest('[data-toggle=&quot;buttons&quot;]')

  if ($parent.length) {
    var $input = this.$element.find('input')

    if ($input.prop('type') === 'radio') $parent.find('.active').removeClass('active')

    $input.prop('checked', !this.$element.hasClass('active'))
      .trigger('change')

  }

  this.$element.toggleClass('active')
}"><pre class="notranslate"><span class="pl-v">Button</span><span class="pl-kos">.</span><span class="pl-c1">prototype</span><span class="pl-kos">.</span><span class="pl-en">toggle</span> <span class="pl-c1">=</span> <span class="pl-k">function</span> <span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-k">var</span> <span class="pl-s1">$parent</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">closest</span><span class="pl-kos">(</span><span class="pl-s">'[data-toggle="buttons"]'</span><span class="pl-kos">)</span>

  <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-c1">length</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
    <span class="pl-k">var</span> <span class="pl-s1">$input</span> <span class="pl-c1">=</span> <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'input'</span><span class="pl-kos">)</span>

    <span class="pl-k">if</span> <span class="pl-kos">(</span><span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'type'</span><span class="pl-kos">)</span> <span class="pl-c1">===</span> <span class="pl-s">'radio'</span><span class="pl-kos">)</span> <span class="pl-s1">$parent</span><span class="pl-kos">.</span><span class="pl-en">find</span><span class="pl-kos">(</span><span class="pl-s">'.active'</span><span class="pl-kos">)</span><span class="pl-kos">.</span><span class="pl-en">removeClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span>

    <span class="pl-s1">$input</span><span class="pl-kos">.</span><span class="pl-en">prop</span><span class="pl-kos">(</span><span class="pl-s">'checked'</span><span class="pl-kos">,</span> <span class="pl-c1">!</span><span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">hasClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span><span class="pl-kos">)</span>
      <span class="pl-kos">.</span><span class="pl-en">trigger</span><span class="pl-kos">(</span><span class="pl-s">'change'</span><span class="pl-kos">)</span>

  <span class="pl-kos">}</span>

  <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">$element</span><span class="pl-kos">.</span><span class="pl-en">toggleClass</span><span class="pl-kos">(</span><span class="pl-s">'active'</span><span class="pl-kos">)</span>
<span class="pl-kos">}</span></pre></div>
<p dir="auto">You could of course use it, if you like.</p>
<p dir="auto">Greets</p>
<p dir="auto">The active class stays on the button, but the checked property is removed from the radio input.</p>
<p dir="auto"><a href="http://jsfiddle.net/meleyal/dafPH/" rel="nofollow">http://jsfiddle.net/meleyal/dafPH/</a></p>