부트 스트랩 - 버튼 토글이 올바르게 작동하지 않습니다.

Question

버튼이 많아서 하나만 토글하고 싶기 때문에 빨간색으로 변합니다. 다른 버튼을 클릭하면 첫 번째 버튼이 정상으로 돌아가고 두 번째 버튼이 빨간색으로 바뀝니다. 내 문제는 Twitter Bootstrap을 사용하여 라디오 버튼을 토글하면 태그 안에있을 때 제대로 작동하지 않는다는 것입니다. 내가 그 (것)들을 제거 할 때 그것은 바르게 작동하는 시작했다, 그러나 그것의 주위에 방법이이어야한다. 나는 태그를 제거하고 싶지 않다. 그렇지 않으면 내 구멍 디자인이 엉망진창이되어 모든 버튼을 나란히 놓는다. 아마도 'btn-group'클래스가해야 할 일일 것이다. 여전히 btn-group을 사용하지 않으면 작동하지 않습니다. 문제는 태그를 사용하는 것입니다. 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를 또는 무언가 몇 가지를 추가하려면이 문제에 대한 해결책을 주시면 대단히 감사합니다 :

$('.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를 내가로부터 얻었다.

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