I have a lot of buttons together and I want to toggle only one, so it's color turns red. When another button is clicked the first button goes back to normal and the second button clicked turns red. My problem is that when you use Twitter Bootstrap to toggle radio buttons, then it does not work right when they are inside tags. When I removed them then it started working right, but there has to be a way around it. I don't want to remove tags cause otherwise it messes up my hole design and then it puts all those buttons side by side, which is probably what class 'btn-group' should do. If I don't use btn-group it still does not work, the problem is with tags.
$('.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 I got from : 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>
I would really appreciate a solution to this problem.. Maybe add some jQuery or something.
I solved the problem myself, so here is the code if anybody needs it.
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>