Element's binding on 'click' reverts the action about bootstrap-checkbox-x HOT 28 CLOSED

Will release a new fix and version.

from bootstrap-checkbox-x.

Fixed with upgrade to release v1.2.0. The labelClickEvent property has now been removed. Instead a more meaningful enclosedLabel property is added. Set enclosedLabel to true whenever you are enclosing the input inside a label tag. It otherwise defaults to false.

from bootstrap-checkbox-x.

Thanks!
It works better now!

Do you have an explanation why it fires 'change' event twice ?
http://jsfiddle.net/1uc4feys/13/

In my real app I use 'change' event listener to fire Ajax call and the first notification with the old value is not necessary.

from bootstrap-checkbox-x.

It should fire change event only once now with the new update. Is that your query?

In your fiddle, It shows only one log message for each click.

from bootstrap-checkbox-x.

Yes. I expect only one notification of 'change'.

Clicking on the checkbox at http://jsfiddle.net/1uc4feys/13/ with Google Chrome 38 and Firefox 33 (Linux) leads to two logs in the JS console for me:

val:on, triggered by: test
val:1, triggered by: test 

A second click leads to:

val:1, triggered by: test
val:0, triggered by: test 

from bootstrap-checkbox-x.

It is the same with Opera 26. But it is basically the same as Chrome (WebKit).

from bootstrap-checkbox-x.

It seems you have an outdated JS on the fiddle or there's a caching problem. Can you try this on your client (hope you do not have browser caching issues - clear cache and restart browsers)?

It works just fine on my tests - just open the index.html in the examples folder and check the last example in your browser console.

from bootstrap-checkbox-x.

I've just updated the fiddle to use the latest version of the JS as inline resource: http://jsfiddle.net/1uc4feys/17/
It prints twice as before.

Now only the CSS is loaded as external resource from http://plugins.krajee.com/assets/f298d3c5/css/checkbox-x.min.css. Plus JQuery and Bootstrap of course.

My app works fine with your last fix. It is just annoying that there are two change notifications. The good thing is that the second notification has the correct value.

from bootstrap-checkbox-x.

Not sure why you are facing this - here is my screenshot of your fiddle ... it shows up one console log here...

from bootstrap-checkbox-x.

The above is on Firefox v33 --- but I see 2 requests on Chrome...

from bootstrap-checkbox-x.

The screenshot from FF 33 also shows (2) before the log. That means it is logged twice with the same content.
In Chrome the logged content differs.

from bootstrap-checkbox-x.

I know the reason... Will provide a fix shortly.

from bootstrap-checkbox-x.

Should be resolved with this fix now..

from bootstrap-checkbox-x.

I'm afraid there is still a bug.
http://jsfiddle.net/1uc4feys/27/ uses the updated checkbox-x.js (inlined) but checked state prints 0 and unchecked - 1. I'd expect the opposite.

from bootstrap-checkbox-x.

Cannot replicate your scenario. The toggling happens ok with the latest js. Please check again.

from bootstrap-checkbox-x.

And one more thing - avoid using a input type CHECKBOX - instead use normal input (type TEXT).

I suppose its mentioned in the guide somewhere... the reason is checkbox default states are ON and OFF and you do not want that to conflct.

This plugin returns multi values 0, 1, and null and will work better with a Normal INPUT.

from bootstrap-checkbox-x.

Fiddle: http://jsfiddle.net/1uc4feys/29/
screencast: https://www.dropbox.com/s/21unvx9ia0sfp7g/checkboxx.mp4?dl=0

from bootstrap-checkbox-x.

I just realize the problem.. you have to use a type checkbox for it to trigger click when label is enclosed. If you use any other input type - it may not behave this way.

Just hold on -- I may need to do some tests

from bootstrap-checkbox-x.

If I remove type="checkbox" or if I use type="text" then my change listener is not even called:
http://jsfiddle.net/1uc4feys/37/

from bootstrap-checkbox-x.

The problem is because of input type = checkbox... it can only have a CHECKED or UNCHECKED value. Thus the third value is not available...

If you use a normal input it will work ( just use the "for" method). For example this:

     Checkbox: <label for="test"> Click me <input id="test"/> </label>
    <br>The new value is: <span id="output"></span>
    <script>     
         $(function() {
        var $el = $('#test');
        $el.checkboxX({'threeState': false, 'enclosedLabel':true});
        $el.on('change', function(evt) {
            $('#output').text($el.val());
        });
    });
    </script>

There needs to be some code revamp for using with checkbox type. Will update on this later... till then you can use a normal text input as above.

from bootstrap-checkbox-x.

I have reverted back the code to original - it works now for all input types including checkbox.

Only when you are enclosing with label -- the change event has to fire twice - for browsers like Chrome to convert the value back.

I would suggest you to use an alternative method where you can use the label outside if possible using the "for" attribute setting.

from bootstrap-checkbox-x.

So these use cases are tested now and works for both threeState and without threeState:

Using Input Type = "text"

All scenarios work

• Works for label outside with for attribute
• Works for label enclosed with for attribute

Using Input Type = "checkbox"

All scenarios work

• Works for label outside with for attribute
• Works for label enclosed
  However, for enclosedLabel there are two change triggers that need to happen to reset the value of checkbox to correct state.

from bootstrap-checkbox-x.

UPDATE

With the latest fix:

• This now works correctly across all input types (text or checkbox) and all scenarios
• Only one change event is triggered on each click for all scenarios..

from bootstrap-checkbox-x.

I've inlined both the JS and CSS ver. 1.3.0 for the new fiddle: http://jsfiddle.net/1uc4feys/43/
With type="text" or without type attribute it works correctly and shows 1 for checked state and 0 for unchecked.

With type="checkbox" it shows the reverse - 0 for checked and 1 for unchecked.
I guess the initial value of on confuses the calculation of the next value.

from bootstrap-checkbox-x.

The above is valid for Google Chrome.
Just tested with FF 33 and there everything works fine !

from bootstrap-checkbox-x.

Use the latest code... seem to have an outdated one.

It works as you can check in this new fiddle.

from bootstrap-checkbox-x.

You can check the last two examples on the demo page in advanced usage section for using the plugin with checkbox inputs

from bootstrap-checkbox-x.

Thanks !
Everything works as desired now !

from bootstrap-checkbox-x.