kartik-v/bootstrap-checkbox-x

An extended checkbox plugin for bootstrap with three states and additional styles.

Hi 👋, I'm Kartik Visweswaran

A passionate open source contributor from India

🔭 I’m currently working on Javascript Plugins and Yii2 Extensions 👨‍💻 All of my projects are available at https://krajee.com 📝 Check out my articles on web tips and my blog 💬 Ask me about anything on app development 📫 How to reach me: https://krajee.com/contact

Support

bootstrap-checkbox-x's Issues

Dynamically change Checked | Unchecked states

Hello
Need to simply switch all the checkboxes Checked / Unchecked

    var chkbx = $("input[sub_checkbox*='true']");
    if ($(this).val() == '0') {
        $.each(chkbx, function(index, value) {
            $(this).checkboxX("refresh", {valueChecked: '1'});
        });
    } else {
        $.each(chkbx, function(index, value) {
            $(this).checkboxX("refresh", {valueUnchecked: '1'});
        });
    }

Checkbox just holds and they do not switch. Is this a right behaviour ?

Event change don't fire when threeState = true

Hi.

If I use option enclosedLabel = false and threeState = true, the change event don't fire.
But, change threeState to false, change event works fine.
Here one example http://jsfiddle.net/7ttpfm2d/1/

What I'm doing wrong here?

Thanks.

Enhancement to checkbox styles to align indicators centered perfectly

Tabindex - why not 0?

Hi

If I place a bootstrap-checkbox-x in the middle of several inputs, then using TAB skips the bootstrap-checkbox-x until the end of last control.

Why not use tabindex="0"? This way it will follow the flow?

Thanks

encodeLabel possible?

Sorry, was looking for this feature in the documentation, but did not find.

Is it possible to use something like 'encodeLabel' => false, to allow using HTML tags in label text?

Rename events to start with `checkbox:` instead of ending with `.checkbox`

To ensure compatibility with namespaces.

custom values not working

Sorry it's still an issue for text boxes.
#38

Richard

Add support for `bootstrap-sass` through new `sass` branch

Default Value

Hi, it seems checkbox has 4 states instead of 3.

1. Default value is empty.
2. Checked is 1
3. NonChecked is 0
4. null is null

In mysql this is not a problem, cause empty and cero is the same. But in PostgreSQL make it crash,

I can use the reset set data-three-state = false it?

$("some").attr('data-three-state',false);
$("some").checkboxX('reset');
//Invalid
I want him Click through data-three-state = false;
how i can do

Add support for using native tristate checkboxes

submit form need checkbox checked, but now 0 and empty is unchecked

<input type="checkbox" value="1" data-toggle="checkbox-x" data-three-state="true" />

1: right
0: wrong
empty: unknown

I want to submit value even if it's 0 or empty, but now 0 and empty is unchecked, form cann't submit it.

Get Class checkbox-x

Hi You. I using bootstrap-checkbox-x. I have .I want take class "Demo" and add to div.class"cbx ".

Calling refresh seems to stop it from responding to mouse clicks (but spacebar ok)

please see Issue #25
I entered this here so the title reflects more of the issue...

Keeps returning 404 Not Found Error

I've downloaded the zip file twice. I made sure to expand the zip file. I unlocked each of the .js files, made sure to put them in the /js/ folder, and I'm using a basic tag <script src="/js/checkbox-x.min.js"></script> yet no matter what, the file shows as 404, not found, even when trying to load the file directly via my browser.

Implement reusable constructor for extending plugin if needed

API Checkbox Change Event Not Firing

Hi all,

I'm trying to set an event to fire when the checkbox-x element changes, but I can't seem to get it to work. What am I doing wrong?

$(".accessoryCheckbox").on('rating.change', function() {
    alert('test');
});

NPM Package

Can you publish your package in NPM ?

Get attribute (i.e. 'id') of parent input ?

Can't seem to access any attributes of original parent input via change event. How do ?
Thanks in anticipation
TT

Implement `destroy` method

Styling enhancements for native checkbox to be compatible with Bootstrap v3.3.2+

How can I check a 'checkbox-x' checkbox using Javascript?

Hi guys,

Like the title says, is it possible to check a 'checkbox-x' checkbox using Javascript? Here's what I've tried:

$("#checkAllButton").on('click', function() {
    $(".accessoryCheckbox").val('1');
});

Where all my checkbox-x checkbox's have the accessoryCheckbox class on them.

Bower Install is broken

Hi,

with your commit 87ff3e0 the bower install command doesn't work as expected.

If you now try to install the package the npm pull the wrong bootstrap version.

I used nodejs in version 4.0.0 and 4.1.0.

Note:
http://fredkschott.com/post/2014/02/npm-no-longer-defaults-to-tildes/

"C:\Users\AppData\Roaming\npm\bower.cmd" "install"
bower bootstrap-checkbox-x#1.5.4 cached git://github.com/kartik-v/bootstrap-checkbox-x.git#1.5.4
bower bootstrap-checkbox-x#1.5.4 validate 1.5.4 against git://github.com/kartik-v/bootstrap-checkbox-x.git#1.5.4
bower bootstrap#~3.0 cached git://github.com/twbs/bootstrap.git#3.0.3
bower bootstrap#~3.0 validate 3.0.3 against git://github.com/twbs/bootstrap.git#~3.0

regards
j0inty

Validate `click` event for iOS devices

Configurable values for checked, unchecked and null

New properties valueChecked, valueUnchecked and valueNull will allow developers to control the values returned on selection.

checkbox.change - triggers 2 times then user clicks on checkbox

useNative = false,
treeState = true,
enclosedLabel = false

Styling enhancements for BS contextual states

Enhancements to support Select Input

Allow plugin to be initialized also on a Select Input

Using space to toggle, scrolls the page

Hi

I've tried the demo here:
http://plugins.krajee.com/checkbox-x/demo

Adn when I navigate using TAB to a checkbox and press space to toggle it, the page scrolls way down. Is it possible to be able to toggle with space without the page scrolling?

Thx

Enhance events and implement event namespace

Implement events with namespace .checkbox.

Code cleanup and formatting

Code restructure and formatting to cleanup various lint errors (using JSHint Code cleanup library).

Checkbox not be changed

Libs:
jQuery v2.1.1
Bootstrap v3.3.1

Options:

$("input[type=checkbox]").checkboxX({
    threeState: false,
    size: 'xs',
    inline: true
});

-- fix --

change: function () {
    .....
    $el.val(newVal);
    $el.trigger('change');

    if () {
        ...
    }
    .....
}

to

change: function () {
    .....

    if () {
        $el.val(newVal);
        $el.trigger('change');
    }
    .....
}

Better default markup for iconNull

Parse checkbox values correctly using integer comparison

Include ability to configure themes for styling

Unable to unselect checkbox after setting val(1)

Hi,

like the title says I'm not able to unselect a checkbox after selecting it via javascript:

// checking it
$( '#option' ).val(1);
$( '#option' ).checkboxX('refresh');
$( '#option' ).trigger('change');

The change event is fired twice, which is probably the problem.
Without checking the checkbox via javascript it works like expected. The attribute data-enclosed-label is already set to true.

Thanks for your help in advance.

First click don't change checkbox value

Hi, again.

I think I found other issue.
When I click first time, the value of checkbox doesn't change.
After that, works fine.

Here an example based on example of #29, changing option data-three-state to "false".
http://jsfiddle.net/7ttpfm2d/6/

I think this issue come up after you commit #29.

Thanks and sorry for bother you.

Two possible + set indeterminate

Is it possible to have a behavior like the standard checkbox?
While clicking it it only has two possible states (checked / unchecked) but it is possible to set it to indeterminate via javascript.
Something like:
http://jsbin.com/wojujequxa/6/edit?html,js,output

just with the plugin's nice styling.

btw I tried to use the plugin in jsbin but it failed. I can see the changed markup (cbx-container etc.), but the new styling is not applied

Display initial value correctly when initializing with checkbox

Add styling for labels similar to bootstrap

custom values not working

Hi Kartik, thanks for this plugin.
I'm trying to use the custom value but after declared the pluging doesn't works as aspeceted. When i check the checkbox the flag doesn't apper and the value is not updated.

Thanks
the code here:

$("chk") .checkboxX({
size: 'md',
threeState: false,
valueChecked: 'true',
valueUnchecked: 'false'
});

Fix init issues when checkboxX is initialized on non-checkbox input (e.g. text)

Doubleclick markes the line

When I double click a checkbox, then the whole row is marked blue:

Is it possible to detect doubleclick and then set selectionlength to 0?

Thx

Dual-state does not work when type="checkbox" specified

Working on 1.4.0, if my input has type="checkbox" specified, three-state checkboxes work as expected, while dual-state don't.

After some debugging, it seems that the checkbox switches back to its original value, after the 'change' event gets re-triggered at line #82, due to flag being 0. Adding an extra check on line 81 for self.options.threeState seems to solve the issue for me, but I'm not sure if it's breaking something else.

if (!flag && !useNative && self.options.threeState) {
    $el.trigger('change');
}

Why binding a listener on the input itself ?

Hi,

I'm having a strange issue which I cannot reproduce so far in a JSFiddle.
The problem is that when using checkbox-x in my app it fires two change events.
And I see the second one comes from https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/js/checkbox-x.js#L48, i.e. from:

self.$element.on('click', change);

Why do you need to bind this listener ? The input is hidden with display:none anyway.

1.3/1.4 and master don't support threeState: false

version 1.2.0 works like a charm, unfortunatelly 1.3/1.4 and master don't support threeState: false

Provide a means to update visual state of checkbox

Right now there is no way to update visual state of checkbox control if underlying checkbox was modified through DOM manipulations.
This is very unconvinient in situations where 2-way bindings are involved like in Angular.
Can you please add some method to simply refresh control's internal state based on checkbox's current state?

Native checkbox does not retain correct properties

For 2-state checkboxes, you have to rely on val() being either "1" or "0" to determine whether a Checkbox-X box is indeed checked. This is because checkbox-x does not seem to correctly set the underlying properties on the native checkbox.

For example, on your demo page (http://plugins.krajee.com/checkbox-x/demo), open up the console and run these tests:

> ("#input-20").val()
"1"
> $("#input-20").is(':checked')
false
> $("#input-20").checked
false

This is also a problem if you want the value to be something else – e.g. "on" or "yes" or whatever.

Not working with angularJS app

When I add the data attribute to a checkbox inside my ng-app, nothing happens. Adding the checkbox in the index file works fine, but I need it of course inside my ng-views.

Element's binding on 'click' reverts the action

Demo: http://jsfiddle.net/1uc4feys/10/

Setup like $el.checkboxX({'threeState': false, 'labelClickEvent':false}); causes a revert of the just changed value because of the event listener for 'click' on $element.

The visual effect is: the checkbox doesn't change its state.
With debugger I can see that it changes from on to off and then from off to on again.