5

いくつかのボタンがあります。ユーザーがいずれかのボタンをクリックしたときに、ボタンがクリックされたような印象をユーザーに与えたいと思います。

これはコードです：

<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属性を無効にします。

4

5 に答える 5

5

ブートストラップラジオボタン機能を使用して、その効果を実現できます。これを試して：

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

于 2012-07-07T12:56:05.597 に答える
1

このようにしてみてください：

$('.btn').click(function(){
    //Removing `data-toggle` from all elements
    $('.btn').removeData('toggle');
    //Adding `data-toggle` on clicked element
    $(this).data('toggle','button');        
});
于 2012-07-07T12:29:20.390 に答える
0

ボタンを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>
于 2012-07-07T12:20:26.517 に答える
0

これが私のサイトのために思いついたものです（改善する唯一の方法は、最終的な値を格納するために隠れた変数を使用しないことです） 

     $("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>

于 2015-01-15T20:01:44.547 に答える
0

$().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();
});
于 2015-08-27T12:08:41.747 に答える