Bootstrap - 按钮切换无法正常工作

Posted 2023-03-05

【中文标题】Bootstrap - 按钮切换无法正常工作

【英文标题】：Bootstrap - button toggle not working right

【发布时间】：2012-10-03 00:28:27

【问题描述】：

我有很多按钮，我只想切换一个，所以它的颜色变成了红色。单击另一个按钮时，第一个按钮恢复正常，单击的第二个按钮变为红色。 我的问题是，当您使用 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 或其他东西。

【问题讨论】：

您可以发布您的 CSS 和/或将所有这些内容放入 jsFiddle 吗？

【参考方案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>