부트 스트랩 - 여러 개의 버튼이있는 경우 데이터 토글 속성

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> 

를, 데이터 토글 속성은 여전히 ​​오늘 남아 단추. 대신 다른 단추를 클릭 할 때 데이터 토글 특성을 사용하지 않도록 설정하려고합니다.

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

div 아래에 버튼을 그룹화하고 그룹에 데이터 토글을 설정해야합니다.

이 같은 시도 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> 

Answer 3

의 예제 페이지에서 볼 수 있습니다

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

Answer 4

내가

 $("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"> 
 
\t <label class="btn btn-default btn-sm"> 
 
\t \t <input name="dispatch" value="false" type="checkbox"> No 
 
\t </label> 
 
\t <label class="btn btn-default btn-sm"> 
 

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

내 사이트 (최종 값을 저장하는 숨겨진 변수를 사용하지 않는 것입니다 개선 할 수있는 유일한 방법)를 내놓았다 것입니다

Answer 5

$().button('toggle')을 사용하면 자바 스크립트를 통해 버튼 상태를 전환 할 수 있습니다. *

내 경우; 그룹화 된 단추를 사용할 수 없으며 시각적으로 서로 구분됩니다.

다른 버튼이 눌러져 있는지 확인하고 자바 스크립트를 사용하여 다시 토글합니다. 내 해결책은 다음과 같습니다.

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