Bootstrap - 按鈕切換不正常

Question

我有很多按鈕，我只想切換一個，所以它的顏色變成紅色。當另一個按鈕被點擊時，第一個按鈕會恢復正常，第二個按鈕會變成紅色。 我的問題是，當您使用Twitter Bootstrap切換單選按鈕時，它們在標籤內部時不起作用。當我將它們移除後，它開始正常工作，但是必須有解決辦法。我不想刪除標籤，否則它會弄亂我的洞設計，然後它將所有這些按鈕並排放置，這可能是'btn-group'班應該做的。如果我不使用btn-group，它仍然不起作用，問題出在標籤上。

$('.btn-group > .btn').click(function() { 

    if($(this).attr('class-toggle') != undefined && !$(this).hasClass('disabled')){ 
     var btnGroup = $(this).parent('.btn-group'); 

     if(btnGroup.attr('data-toggle') == 'buttons-radio') { 
      btnGroup.find('.btn').each(function() { 
       $(this).removeClass($(this).attr('class-toggle')); 
      }); 
      $(this).addClass($(this).attr('class-toggle')); 
     } 
     } 
    }); 

jQuery的我接到了：Toggle Twitter Bootstrap button class when active

<table class="table" id="table_change"> 
<tbody> 
    <div class="btn-group" data-toggle="buttons-radio"> 
    <tr> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    </tr> 
    <tr>             
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    <td><button class="btn btn_size" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
    </tr> 
    </div>            
</tbody> 
</table> 

我真的很感激解決這個問題..也許添加一些jQuery的什麼的。

Answer 1

我自己解決了這個問題，所以這裏是代碼，如果有人需要它。

的jQuery：

$('.reject-toggle').click(function() { 
     $('.reject-toggle').each(function() { 
      $(this).find('button'); 
      $('.color-btn').removeClass('btn-danger'); 
     }); 
     $(this).find('button').addClass('btn-danger'); 
    }); 

HTML：

<table class="table"> 
<tbody> 
<tr> 
    <td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
</tr> 
<tr>             
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
<td class="reject-toggle"><button class="btn btn_size color-btn" class-toggle="btn-danger"><h4>Some text</h4></button></td> 
</tr>            
</tbody> 
</table>