Bootstrap - 当存在多个按钮时，如何使用 data-toggle 属性

Question

我是一位有用的助手，可以为您翻译文本。

我有几个按钮，当用户点击任何一个按钮时，我希望给他这样的印象，即按钮被点击了。

以下是代码：

：

<table>
<thead>
<tr>
<th><button class="btn btn-danger" >Today</button></th>
<th><button class="btn btn-danger" >Tomorrow</button></th>
<th><button class="btn btn-danger" >DayAfterTomorrow</button></th>
</tr>
</thead>
</table>

当我只有一个按钮时，这个方法有效：

<button class="btn" data-toggle="button">Today</button>

如果用户点击明天，data-toggle属性仍然保留在今天的按钮中。相反，我希望在单击其他按钮时禁用data-toggle属性。

- Pavan

Answer 1

您可以使用Bootstrap的单选按钮功能来实现该效果。尝试这样做：

<div data-toggle="buttons-radio">
    <button class="btn btn-danger">Today</button>
    <button class="btn btn-danger">Tomorrow</button>
    <button class="btn btn-danger">DayAfterTomorrow</button>
</div>

Demo: http://jsfiddle.net/u7Lg8/

- Andres Ilich

---

很好。但唯一的问题是我将按钮作为表头。 - Pavan

在 https://github.com/twitter/bootstrap/blob/master/js/bootstrap-button.js#L53 的源代码中，它选择了具有 data-toggle="buttons-radio" 属性的最近父元素，将其下方的所有活动链接取消激活，然后切换按下按钮的活动链接，因此如果您将 data-toggle="buttons-radio" 添加到您标题的 <tr> 标签中，它应该可以工作。 - guigouz

如果您想通过JavaScript切换，和/或者不想使用单选按钮分组; 您可以查看我的答案，了解这种情况下的解决方案。 - tozlu

Answer 2

试试这样：

$('.btn').click(function(){
    //Removing `data-toggle` from all elements
    $('.btn').removeData('toggle');
    //Adding `data-toggle` on clicked element
    $(this).data('toggle','button');        
});

- Engineer

Answer 3

这是我为我的网站想出来的东西（唯一改进的方法是不使用隐藏变量来存储最终值）

     $("input[name='dispatch']").change(function(){
           
            $(this).parent().siblings().removeClass('active btn-primary');
            $("#WantsDispatchService").val($(this).val());
            
        });

 
  <div class="btn-group btn-toggle  " data-toggle="buttons">
 <label class="btn btn-default btn-sm">
  <input name="dispatch" value="false" type="checkbox"> No
 </label>
 <label class="btn btn-default  btn-sm">

  <input name="dispatch" value="true" type="checkbox"> Yes
 </label>
  
</div>
<input type ="hidden" id="WantsDispatchService" name="WantsDispatchService" value="false"> 
</div>

- kiev

Answer 4

你需要将按钮分组放在一个 div 中，并在该组上设置 data-toggle 属性。

你可以在 Twitter bootstrap buttons 的示例页面中看到它。

<!-- Add data-toggle="buttons-checkbox" for checkbox style toggling on btn-group -->
<div class="btn-group" data-toggle="buttons-checkbox">
  <button class="btn">Left</button>
  <button class="btn">Middle</button>
  <button class="btn">Right</button>
</div>

- maxmax

---

不是我要找的。 - Pavan

当然。我忘了告诉你，data-toggle的值需要JS来获取点击按钮的值，请咨询@Engineer。 - maxmax

Answer 5

您可以使用$().button('toggle')通过JavaScript切换按钮状态。*

在我的情况下，我不能使用分组按钮，因为它们在视觉上是彼此分开的。

我检查其他按钮是否被按下，并使用JavaScript将其切换回来。以下是我的解决方案：

$('#buttonA').click(function (e) {
    if ($('#buttonB').attr('aria-pressed') == 'true') {
        $('#buttonB').button('toggle');
    }
    e.preventDefault();
});

$('#buttonB').click(function (e) {
    if ($('#buttonA').attr('aria-pressed') == 'true') {
        $('#buttonA').button('toggle');
    }
    e.preventDefault();
});

- tozlu