jquery - Bootstrap - 存在多个按钮时的数据切换属性

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 属性。

Answer 1

您可以使用引导单选按钮功能来实现该效果。尝试这个：

<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>

演示：http: //jsfiddle.net/u7Lg8/

Answer 2

试试这样：

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

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>

Answer 4

您需要将按钮分组在 div 下并在组上设置数据切换。

您可以在Twitter 引导按钮的示例页面中看到它

<!-- 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>

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();
});