So - you've done awesome... I feel like I'm that PITA from the test team that finds every little thing and adds it to the JIRA fault list.

I swear, I'm not that guy!

Continuing from this fiddle (http://jsfiddle.net/j5QDF/3/) The label click now works! YAY! But (oh oh) -the only catch is that the button state colour does not change. So if you "on" state is blue, when using the label to change the state, the background colour remains blue rather than changing to the off colour.

Make sense? I hope so!

Thanks again!

Hello,

I really didn't mean this to be an issue, but I wasn't sure of any other way to get this to your attention. My current project is based on bootstrap 1.2.0. The bootstrap css has been modified quite a bit, so moving to the latest version of bootstrap isn't really an option (at least for now). I really wanted to make use of your toggle buttons, but it doesn't seem to play well w/ ver 1.2.0.

If it's not a lot to ask, could you tell me the specific dependencies that toggle-buttons has on bootstrap.css, so that I can make them locally.

Thanks - and toggle buttons is very beautiful!

I tried to produce an example on my app but it didn't work (labels were mispositioned ).

I assumed it was because my input didn't have an id.

To fix this i used "prop()" instead of "attr()" on line 55 in "jquery.toggle.buttons.js"

Please add the capability to grab the icon to switch states. Like in the JQM toggle switch: http://jquerymobile.com/demos/1.2.0-pre/docs/forms/switch/

Should the DOM be plugin-specific ?

Is there a reason why you decide to design it this way (since it's bootstrap specific) ?
What about relying on the checkbox instead of a wrapper ?

<input id="checkbox1" type="checkbox" value="value1" checked="checked">

And then

$('#checkbox1').toggleButtons();

In my opinion, the plugin should build itself what it needs to display correctly, our views should stay clean of plugin-specific DOM. What do you think ?

I see $('.toggle-button') selector is used in the code, which means, that if the toggleButtons was called on a checkbox that's not yet inserted into DOM, it won't attach any event listeners.

There should be an option to customize transition speed/duration.
The parameter can be in miliseconds or in a scale (0% ~ 100%) of a predetermined max duration.

This is an enhancement rather than a bug. Would anyone be interested in adding a 3 way toggle? I have my own basic version of this at the moment, but would rather roll this into an exisiting project if possible.

Tiny thing: Your div tags aren't closed in the example code.

Be able to customize height & text-size & text-style

I would like to use and load your buttons in a lazy manner. All components of the bootstrap are capable of this. Consider modal links. A modal link does not aware of modal capabilities until it is clicked. When the link is clicked, it is gaining a modal behavior. What I would like to do is something like this. This is pretty important for ajax contents and reducing the amount of the javascript codes by utilizing Data Attributes as in your sample. This brings extra markup for initial state but It is not a problem.

Check type ahead example:

  $(function () {
    $('body').on('focus.typeahead.data-api', '[data-provide="typeahead"]', function (e) {
      var $this = $(this)
      if ($this.data('typeahead')) return
      e.preventDefault()
      $this.typeahead($this.data())
    })
  })

First let me say it's fantastic to see these actively being developed.

One feature that would be very helpful:

If the settable options could have a matching data- attribute that could be read to activate the option.

That way you could use a single function call to activate the buttons with a class and then have them be individualized according to the data- attributes. For markup that's being created dynamically with the content/style varied based upon some settings in a database or other then this feature delivers an immense amount of flexibility.

Hi!
First off I wanna say awesome work!!

To the issue:
if you toggle the disabling and enabling in the example given in the github pages,
after re disabling the button again, you are able to still activate the switch.

The click event should be on the entire button. Every time i see toggle buttons, i click on the colored area...

Hi - love your work!

There doesn't seem to be a way for this control to represent a disabled="" state. Is that the case?

Would dearly love to be able to disable/lock the toggle with a additional disabled appearance. Do you think that's possible?

in a netbook (or crt+- in browser) i can't see unchecked option

Hi Guys,

I've added this to my jquery to automatically set a toggle switch to on / yes but it doesn't want to work...

When I remove the toggle.js file it works OK.

Has anyone else had this problem?

It doesn't seem that the bootstrap toggle button is matching whether the checkbox is checked or not.

Is this a deliberate design choice?

Eg. when the checkbox is checked the toggle button is showing OFF.

Hi!

Thanks for the update, that's nearly exactly what I'm talking about!

However, I use a class as the selector to identify a togglebutton, not by an individual ID. I've setup a gist so you can see the page I'm building.

https://gist.github.com/3703338

When a field is locked - the label for that checkbox seems to still allow a label click to toggle the button, when it probably shouldn't.

When using a class as selector, I'm finding that all labels seem to toggle the last button touched.

I hope this makes sense!

Hi, with latest version of jquery, 1.9.1, this great plugin is not working. Any suggestion? Thanks

Can the text size and styling be manipulated?

Thanks for the great switches!

One can only toggle once, then the toggle button is locked to its status.
Restoring jQuery v1.7.2 make it work again.

Hey, it would be nice to have this great thingy working in companion with AngularJS.

It would be great if we had a LESS version that we could just import into the bootstrap compile--this would also allow us to color the button via the variables.less.

The handler of the toggle button is draggable on desktop browsers but it doesn't work on mobile.

I have been working with Zend framework, which in its low level handling of checkboxes adds a hidden field containing the unchecked value, above each checkbox. This is to ensure that a checkbox control always returns a value even if it is unchecked, ZF allows you to set the checked and unchecked values separately.

Unfortunately this means that the two input statements (hidden and checkbox) are very tightly bound, and while its easy to wrap the pair in a div, getting in to wrap just the checkbox is near impossible without altering the ZF framework.

However by changing all of the .find('input') statements in jquery-button-toggle.js to

.find('input[type="checkbox"]')

the problem goes away as only the checkbox elements are acted upon.

I'd like to be able to use your toggle buttons to show and hide form elements (e.g. options visible or invisible based on checkbox selection).

Could you give me an example of how I could do this in the javascript?

how to display an alert with the value of the checkbox in the onChange event?

<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="1" checked="checked">
</div>
<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="2" checked="checked">
</div>
<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="3" checked="checked">
</div>
<div class="success-toggle-button">
<input type="checkbox" name="pdid[]" class="toggle" value="4" checked="checked">
</div>

$('.success-toggle-button').toggleButtons({
onChange: function($el, status, e){
console.log($el, status, e);
//alert(); display value of the checkbox changed???
}
});

what about radio buttons??
Thanks

Hi all,

I am new to Github and so not sure if this is the right place to post things like this so apologise if not!!

Great toggle switch - love it - but when I change the state of the button how do I change the text that appears in the div - at the moment True/False - but I want it to show Live/Hidden!

Thanks in advance and thank you for all your hard work!

If I use the tab key to move between fields this does not appear to be supported.

When a label is attached to a checkbox that is bound to a toggle switch, one might expect to be able to click on the label to toggle the toggleswitch. This does not occur.

Mouse cursor should be a pointer in the whole button.
Currently it is only on the white block.

Is it possible to put an icon in a toggle button, something like:

$('#toggle-me').toggleButtons({
  label: {
    enabled: $("<i class='something'></i>"),
    disabled: $("<i class='something-else'></i>")
  }
});

The motivation here is font-awesome icons inside a toggle button. Any ideas?

It would be nice to expose a method to change the button state

e.g.: $("#checkbox").toggleButtons("set", true)

These buttons are too big! Can you provide small and smaller buttons? Thanks!

I hope I'm not doing something silly but I am trying to integrate your control into a Wordpress/PHP solution and have ensured that jQuery is loading first but for some reason it is not picking up the '$' variable. This leaves me with an error on line 15 of jquery.toggle.buttons.js:

$.fn.toggleButtons = function (method) {

I am using jQuery version 1.8.3.