CODEWITHSUNDEEP
jquerycsstwitter-bootstrap
Pavan
Pavan

Reputation: 668

Bootstrap - data-toggle attribute when multiple buttons exist

I have several buttons. When a user clicks any button I want to give him the impression that the button is clicked .

This is the code:

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

And this works when I have a single button:

<button class="btn" data-toggle="button">Today</button>

If the user clicks on tomorrow, the data-toggle attribute still remains for the today button. Instead, I want to disable the data-toggle attribute when another button is clicked.

Upvotes: 5

Views: 21248

Answers (5)

tozlu
tozlu

Reputation: 4865

You can use $().button('toggle') to toggle button state via javascript.*

In my case; i can not use grouped buttons, they are visually separate from each other.

I check if the other button is pressed and toggle it back using javascript. Here is my solution:

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

Upvotes: 0

kiev
kiev

Reputation: 2070

Here is what I came up with for my site (only way to improve is to NOT use hidden variable to store final value ) 

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

Upvotes: 0

Andres I Perez
Andres I Perez

Reputation: 75379

You can use the bootstraps radio button functionality to achieve that effect. Try this:

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

Demo: http://jsfiddle.net/u7Lg8/

Upvotes: 5

Engineer
Engineer

Reputation: 48793

Try like this:

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

Upvotes: 1

maxmax
maxmax

Reputation: 778

You need to group the buttons under a div and set the data-toggle on the group.

You can see it in the example page for 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>

Upvotes: 0

Related Questions