├── .github ├── CONTRIBUTING.md ├── ISSUE_TEMPLATE.md ├── PULL_REQUEST_TEMPLATE.md └── stale.yml ├── CHANGE.md ├── LICENSE.md ├── README.md ├── bower.json ├── composer.json ├── css ├── checkbox-x.css ├── checkbox-x.min.css ├── theme-krajee-flatblue.css └── theme-krajee-flatblue.min.css ├── examples ├── bs3.html ├── bs4.html └── bs5.html ├── img └── loading.gif ├── js ├── checkbox-x.js └── checkbox-x.min.js ├── package.json └── sass ├── checkbox-x.scss └── theme-krajee-flatblue.scss /.github/CONTRIBUTING.md: -------------------------------------------------------------------------------- 1 | Contributing to bootstrap-checkbox-x 2 | ==================================== 3 | Looking to contribute something to bootstrap-checkbox-x? **Here's how you can help.** 4 | 5 | Please take a moment to review this document in order to make the contribution 6 | process easy and effective for everyone involved. 7 | 8 | Following these guidelines helps to communicate that you respect the time of 9 | the developers managing and developing this open source project. In return, 10 | they should reciprocate that respect in addressing your issue or assessing 11 | patches and features. 12 | 13 | Using the issue tracker 14 | ----------------------- 15 | When [reporting bugs][reporting-bugs] or 16 | [requesting features][requesting-features], the 17 | [issue tracker on GitHub][issue-tracker] is the recommended channel to use. 18 | 19 | The issue tracker **is not** a place for support requests. Refer the 20 | [plugin documentation](http://plugins.krajee.com/checkbox-x), 21 | [plugin demos](http://plugins.krajee.com/checkbox-x/demo), and / or refer to the 22 | [webtips Q & A forum](http://webtips.krajee.com/questions) which are the better places to get help. 23 | 24 | Reporting bugs with bootstrap-checkbox-x 25 | ---------------------------------------- 26 | We really appreciate clear bug reports that _consistently_ show an issue 27 | _within bootstrap-checkbox-x_. 28 | 29 | The ideal bug report follows these guidelines: 30 | 31 | 1. **Use the [GitHub issue search][issue-search]** — Check if the issue 32 | has already been reported. 33 | 2. **Check if the issue has been fixed** — Try to reproduce the problem 34 | using the code in the `master` branch. 35 | 3. **Isolate the problem** — Try to create an 36 | [isolated js fiddle][isolated-case] that consistently reproduces the problem. 37 | 38 | Please try to be as detailed as possible in your bug report, especially if an 39 | isolated test case cannot be made. Some useful questions to include the answer 40 | to are: 41 | 42 | - What steps can be used to reproduce the issue? 43 | - What is the bug and what is the expected outcome? 44 | - What browser(s) and Operating System have you tested with? 45 | - Does the bug happen consistently across all tested browsers? 46 | - What version of jQuery are you using? And what version of bootstrap-checkbox-x? 47 | - Are you using bootstrap-checkbox-x with other plugins? 48 | 49 | All of these questions will help others fix and identify any potential bugs. 50 | 51 | Requesting features in bootstrap-checkbox-x 52 | ------------------------------------------ 53 | Before starting work on a major feature for bootstrap-checkbox-x, **read the 54 | [documentation](http://plugins.krajee.com/checkbox-x) first** or you may risk spending a considerable amount of 55 | time on something which the project developers are not interested in bringing into the project. 56 | 57 | ### Submitting a pull request 58 | 59 | We use GitHub's pull request system for submitting patches. Here are some 60 | guidelines to follow when creating the pull request for your fix. 61 | 62 | 1. Make sure to create a ticket for your pull request. This will serve as the 63 | bug ticket, and any discussion about the bug will take place there. Your pull 64 | request will be focused on the specific changes that fix the bug. 65 | 2. Make sure to reference the ticket you are fixing within your pull request. 66 | This will allow us to close off the ticket once we merge the pull request, or 67 | follow up on the ticket if there are any related blocking issues. 68 | 3. Explain why the specific change was made. Not everyone who is reviewing your 69 | pull request will be familiar with the problem it is fixing. 70 | 4. Run your tests first. If your tests aren't passing, the pull request won't 71 | be able to be merged. If you're breaking existing tests, make sure that you 72 | aren't causing any breaking changes. 73 | 5. Only include source changes. While it's not required, only including changes 74 | from the `src` directory will prevent merge conflicts from occuring. Making 75 | this happen can be as a simple as not committing changes from the `dist` 76 | directory. 77 | 78 | By following these steps, you will make it easier for your pull request to be 79 | reviewed and eventually merged. 80 | 81 | Triaging issues and pull requests 82 | --------------------------------- 83 | Anyone can help the project maintainers triage issues and review pull requests. 84 | 85 | ### Handling new issues 86 | 87 | bootstrap-checkbox-x regularly receives new issues which need to be tested and organized. 88 | 89 | When a new issue that comes in that is similar to another existing issue, it 90 | should be checked to make sure it is not a duplicate. Duplicates issues should 91 | be marked by replying to the issue with "Duplicate of #[issue number]" where 92 | `[issue number]` is the url or issue number for the existing issue. This will 93 | allow the project maintainers to quickly close off additional issues and keep 94 | the discussion focused within a single issue. 95 | 96 | If you can test issues that are reported to bootstrap-checkbox-x that contain test cases and 97 | confirm under what conditions bugs happen, that will allow others to identify 98 | what causes a bug quicker. 99 | 100 | ### Reviewing pull requests 101 | 102 | It is very common for pull requests to be opened for issues that contain a clear 103 | solution to the problem. These pull requests should be rigorously reviewed by 104 | the community before being accepted. If you are not sure about a piece of 105 | submitted code, or know of a better way to do something, do not hesitate to make 106 | a comment on the pull request. 107 | 108 | ### Reviving old tickets 109 | 110 | If you come across tickets which have not been updated for a while, you are 111 | encouraged to revive them. While this can be as simple as saying `:+1:`, it is 112 | best if you can include more information on the issue. Common bugs and feature 113 | requests are more likely to be fixed, whether it is by the community or the 114 | developers, so keeping tickets up to date is encouraged. 115 | 116 | Licensing 117 | --------- 118 | 119 | It should also be made clear that **all code contributed to bootstrap-checkbox-x** must be 120 | licensable under the [BSD-3 license][licensing]. Code that cannot be released 121 | under this license **cannot be accepted** into the project. 122 | 123 | [isolated-case]: https://jsfiddle.net/ 124 | [issue-search]: https://github.com/kartik-v/bootstrap-checkbox-x/search?q=&type=Issues 125 | [issue-tracker]: https://github.com/kartik-v/bootstrap-checkbox-x/issues 126 | [licensing]: https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/LICENSE.md 127 | [reporting-bugs]: #reporting-bugs-with-bootstrap-checkbox-x 128 | [requesting-features]: #requesting-features-in-bootstrap-checkbox-x -------------------------------------------------------------------------------- /.github/ISSUE_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Prerequisites 2 | 3 | - [ ] I have searched for similar issues in both open and closed tickets and cannot find a duplicate. 4 | - [ ] The issue still exists against the latest `master` branch of bootstrap-checkbox-x. 5 | - [ ] This is not an usage question. I confirm having read the plugin [documentation](http://plugins.krajee.com/checkbox-x) and [demos](http://plugins.krajee.com/checkbox-x/demo). 6 | - [ ] This is not a general programming / coding question. (Those should be directed to the [webtips Q & A forum](http://webtips.krajee.com/questions)). 7 | - [ ] I have attempted to find the simplest possible steps to reproduce the issue. 8 | - [ ] I have included a failing test as a pull request (Optional). 9 | 10 | ## Steps to reproduce the issue 11 | 12 | 1. 13 | 2. 14 | 3. 15 | 16 | ## Expected behavior and actual behavior 17 | 18 | When I follow those steps, I see... 19 | 20 | I was expecting... 21 | 22 | ## Environment 23 | 24 | Browsers 25 | 26 | - [ ] Google Chrome 27 | - [ ] Mozilla Firefox 28 | - [ ] Internet Explorer 29 | - [ ] Safari 30 | 31 | Operating System 32 | 33 | - [ ] Windows 34 | - [ ] Mac OS X 35 | - [ ] Linux 36 | - [ ] Mobile 37 | 38 | Libraries 39 | 40 | - jQuery version: 41 | - bootstrap-checkbox-x version: 42 | 43 | ## Isolating the problem 44 | 45 | - [ ] This bug happens [on the plugin demos page](http://plugins.krajee.com/checkbox-x/demo) 46 | - [ ] The bug happens consistently across all tested browsers 47 | - [ ] This bug happens when using bootstrap-checkbox-x without other plugins 48 | - [ ] I can reproduce this bug in [a jsbin](https://jsbin.com/) 49 | -------------------------------------------------------------------------------- /.github/PULL_REQUEST_TEMPLATE.md: -------------------------------------------------------------------------------- 1 | ## Scope 2 | This pull request includes a 3 | 4 | - [ ] Bug fix 5 | - [ ] New feature 6 | - [ ] Translation 7 | 8 | ## Changes 9 | The following changes were made 10 | 11 | - 12 | - 13 | - 14 | 15 | ## Related Issues 16 | If this is related to an existing ticket, include a link to it as well. -------------------------------------------------------------------------------- /.github/stale.yml: -------------------------------------------------------------------------------- 1 | # Number of days of inactivity before an issue becomes stale 2 | daysUntilStale: 60 3 | # Number of days of inactivity before a stale issue is closed 4 | daysUntilClose: 7 5 | # Issues with these labels will never be considered stale 6 | exemptLabels: 7 | - bug 8 | - enhancement 9 | - pinned 10 | - security 11 | # Label to use when marking an issue as stale 12 | staleLabel: wontfix 13 | # Comment to post when marking an issue as stale. Set to `false` to disable 14 | markComment: > 15 | This issue has been automatically marked as stale because it has not had 16 | recent activity. It will be closed if no further activity occurs. Thank you 17 | for your contributions. 18 | # Comment to post when closing a stale issue. Set to `false` to disable 19 | closeComment: false -------------------------------------------------------------------------------- /CHANGE.md: -------------------------------------------------------------------------------- 1 | Change Log: `bootstrap-checkbox-x` 2 | ================================== 3 | 4 | ## Version 1.5.7 5 | 6 | **Date**: 19-Sep-2021 7 | 8 | - (enh #59): Allow custom icon CSS for checked, unchecked and null states. 9 | - (enh #58): New boolean property `useCrossIcon` for checked indicator. 10 | - (enh #57): Revamp bootstrap checkbox-x markup for better styling & alignment across Bootstrap versions. 11 | - New CSS class `.cbx-krajee` for the container markup to enclose all checkboxes with their labels 12 | - Automated label and input vertical alignment for checkboxes 13 | - (enh #56): Enhancements to support all bootstrap versions (5.x, 4.x. and 3.x) enhancement 14 | - (enh #55): Use enhanced SVG icons 15 | 16 | ## Version 1.5.6 17 | 18 | **Date**: 19-May-2021 19 | 20 | - Update CDN version to use jsdelivr. 21 | 22 | ## Version 1.5.5 23 | 24 | **Date**: 02-Nov-2018 25 | 26 | - Add github contribution and issue/PR log templates. 27 | - enh #53: Rename events to start with `checkbox:` instead of ending with `.checkbox` . 28 | - enh #48: Correct package.json. 29 | - enh #43: Add support for `bootstrap-sass` through new `sass` branch. 30 | - enh #42: Display initial value correctly when initializing with checkbox 31 | - enh #39: New property `allowThreeValOnInit` for showing third state on init for two state checkboxes. 32 | - enh #38, #41: Use string values instead of integers. 33 | 34 | ## Version 1.5.4 35 | 36 | **Date**: 19-Sep-2015 37 | 38 | - (enh #36): Include ability to configure themes for styling. 39 | - (enh #35): Configurable values for checked, unchecked and null. 40 | - (enh #34): Enhancements to support Select Input. 41 | - (enh #32): Implement `destroy` method. 42 | - Better bootstrap version dependency. 43 | - (enh #31): Enhance events and implement event namespace `.checkbox`. 44 | - (enh #30): Enhance validation to change checkbox states based on input type and label enclosure. 45 | - (bug #29): Trigger change correctly for threeState input within enclosed label. 46 | 47 | ## Version 1.5.3 48 | 49 | **Date**: 18-Jun-2015 50 | 51 | - (enh #24): Styling enhancements for BS contextual states. 52 | - (enh #23): Better styling to prevent block selection for checkbox container & label. 53 | - (enh #22): New configurable property `tabindex`. 54 | 55 | ## Version 1.5.2 56 | 57 | **Date**: 10-May-2015 58 | 59 | - (enh #20): Validate `click` event for iOS devices. 60 | - (enh #19): Better default markup for `iconNull`. 61 | - (enh #18): Enhancement to checkbox styles to align indicators centered perfectly. 62 | - (enh #17): Parse checkbox values correctly using integer comparison. 63 | - (enh #16): Styling enhancements for native checkbox to be compatible with Bootstrap v3.3.2+. 64 | - (bug #15): Fix init issues when checkboxX is initialized on non-checkbox input (e.g. text). 65 | 66 | ## Version 1.5.1 67 | 68 | **Date**: 31-Jan-2015 69 | 70 | - (enh #14): Implement reusable constructor for extending plugin if needed. 71 | - (enh #13): Code restructure and formatting to cleanup various lint errors (using JSHint Code cleanup library). 72 | 73 | ## Version 1.5.0 74 | 75 | **Date**: 28-Dec-2014 76 | 77 | - (enh #9, #10, #11): Fix validation of checkbox changes for plugin initialization on checkbox inputs: 78 | - Three State & Two State 79 | - Non-enclosed labels 80 | - Enclosed labels 81 | - Non-enclosed labels (native) 82 | - Enclosed labels (native) 83 | 84 | ## Version 1.4.0 85 | 86 | **Date**: 08-Nov-2014 87 | 88 | - Updated CHANGE log to reflect user friendly date time formats. 89 | 90 | ## Version 1.3.0 91 | 92 | **Date:** 16-Oct-2014 93 | 94 | - (enh #5): Add styling for labels similar to bootstrap 95 | - (enh #4): Add support for using native tristate checkboxes 96 | 97 | ## Version 1.2.0 98 | 99 | **Date:** 15-Oct-2014 100 | 101 | - (bug #3): Added `enclosedLabel` property for correct toggling of checkboxes enclosed inside labels. 102 | - Removed `labelClickEvent` property. 103 | 104 | ## Version 1.1.0 105 | 106 | **Date:** 10-Oct-2014 107 | 108 | - (enh #2): Add `labelClickEvent` property for controlling triggering change event on label click. 109 | 110 | ## Version 1.0.0 111 | 112 | **Date:** 12-Jun-2014 113 | 114 | Initial release. The following features are included in this release: 115 | 116 | - Enhances any HTML input with `data-toggle=checkbox-x` to an extended checkbox control. 117 | - The plugin offers the following three states and values for the checkboxes: 118 | - `1` or `true`: Checkbox is checked. 119 | - `0` or `false`: Checkbox is unchecked. 120 | - `null`: Checkbox is indeterminate. 121 | - You can set the plugin to allow **three states** or the default **two states** for the checkbox. 122 | - Specifically uses Bootstrap 3.x styles & glyphs. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes. 123 | - Special CSS 3 styling, to enhance the control to look like any Bootstrap 3 form control. Supports the `has-error`, `has-success`, `has-warning` 124 | styling states like other Bootstrap form-controls. 125 | - Plugin CSS styling automatically defaults the checkboxes to inline display. You can also control the markup for block display like in checkbox lists. 126 | - You can add a `label` before or after with a `for` attribute and click on the label to change the checkbox values. Alternatively you can enclose the 127 | input within a `label` tag as well. 128 | - Ability to navigate to the checkbox controls via keyboard, and modify the values using the `space` bar on the keyboard. 129 | - Ability to size the checkbox control. Five prebuilt size templates are available `xl`, `lg`, `md`, `sm`, and `xs`. 130 | - Triggers JQuery events for advanced development. The plugin automatically triggers the `change` event for the input, whenever the checkbox value is changed via clicking. Events currently available are `change` and `reset`. 131 | - Ability to access methods and refresh the input dynamically via javascript at runtime. 132 | - Disabled and readonly checkbox input support. -------------------------------------------------------------------------------- /LICENSE.md: -------------------------------------------------------------------------------- 1 | Copyright (c) 2014 - 2021, Kartik Visweswaran 2 | Krajee.com 3 | All rights reserved. 4 | 5 | Redistribution and use in source and binary forms, with or without modification, 6 | are permitted provided that the following conditions are met: 7 | 8 | * Redistributions of source code must retain the above copyright notice, this 9 | list of conditions and the following disclaimer. 10 | 11 | * Redistributions in binary form must reproduce the above copyright notice, this 12 | list of conditions and the following disclaimer in the documentation and/or 13 | other materials provided with the distribution. 14 | 15 | * Neither the names of Kartik Visweswaran or Krajee nor the names of its 16 | contributors may be used to endorse or promote products derived from 17 | this software without specific prior written permission. 18 | 19 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS" AND 20 | ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE IMPLIED 21 | WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE 22 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE FOR 23 | ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL DAMAGES 24 | (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; 25 | LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON 26 | ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT 27 | (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE OF THIS 28 | SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 |

2 | 3 | Krajee Logo 4 | 5 |
6 | bootstrap-checkbox-x 7 |
8 | Donate 10 |       11 | kartikv 12 |

13 | 14 |
15 | 16 | [![Bower version](https://badge.fury.io/bo/bootstrap-checkbox-x.svg)](http://badge.fury.io/bo/bootstrap-checkbox-x) 17 | [![Latest Stable Version](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/v/stable)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x) 18 | [![License](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/license)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x) 19 | [![Packagist Downloads](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/downloads)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x) 20 | [![Monthly Downloads](https://poser.pugx.org/kartik-v/bootstrap-checkbox-x/d/monthly)](https://packagist.org/packages/kartik-v/bootstrap-checkbox-x) 21 | 22 |
23 | 24 | An extended checkbox plugin for Bootstrap built using JQuery, which allows three checkbox states and includes additional styles. The plugin uses Bootstrap markup and CSS 3 styling by default, but it can be overridden with any other CSS markup. It also helps you to fallback to a native checkbox OR display native checkboxes with tristate capability. 25 | 26 | With v1.5.5, the plugin now supports initializing widget on a SELECT input as well (other than a CHECKBOX or TEXT input). 27 | 28 | > NOTE: The checkbox plugin stores the values by default as character format (and not boolean format) for checked and unchecked states. This can be overridden by setting `valueChecked`, `valueUnchecked` and `valueNull` properties. 29 | 30 | ## Features 31 | 32 | 1. Enhances any HTML input (preferrably a checkbox or text input) with `data-toggle=checkbox-x` to an extended checkbox control. 33 | 2. The plugin offers the following three states and values for the checkboxes: 34 | - `'1'`: Checkbox is checked. This value is configurable through `valueChecked` property. 35 | - `'0'`: Checkbox is unchecked. This value is configurable through `valueUnchecked` property. 36 | - `''`: Checkbox is indeterminate. This value is configurable through `valueNull` property. 37 | 3. You can set the plugin to allow **three states** or the default **two states** for the checkbox. 38 | 4. Specifically uses Bootstrap 5.x or 4.x or 3.x styles. One can configure the checked, unchecked, and indeterminate icons to be shown for the checkboxes. 39 | 5. Special CSS 3 styling, to enhance the control to look like any Bootstrap 3 form control. Supports the `has-error`, `has-success`, `has-warning` 40 | styling states like other Bootstrap form-controls. 41 | 6. Plugin CSS styling automatically defaults the checkboxes to inline display. You can also control the markup for block display like in checkbox lists. 42 | 7. You can add a `label` before or after with a `for` attribute and click on the label to change the checkbox values. Alternatively you can enclose the 43 | input within a `label` tag as well. 44 | 8. Ability to navigate to the checkbox controls via keyboard, and modify the values using the `space` bar on the keyboard. 45 | 9. Ability to size the checkbox control. Five prebuilt size templates are available `xl`, `lg`, `md`, `sm`, and `xs`. 46 | 10. Triggers JQuery events for advanced development. The plugin automatically triggers the `change` event for the input, whenever the checkbox value is changed via clicking. Events currently available are `change` and `checkbox.reset`. 47 | 11. Ability to access methods and refresh the input dynamically via javascript at runtime. 48 | 12. Disabled and readonly checkbox input support. 49 | 13. Allow third state to be configured (only on init) for two state checkboxes. 50 | 14. Added support for displaying native checkboxes with tristate capability. When displaying native checkboxes, the advanced styling offerred by the plugin will not be available. 51 | 52 | > NOTE: The latest version of the plugin v1.5.7 has been released. Refer the [CHANGE LOG](https://github.com/kartik-v/bootstrap-checkbox-x/blob/master/CHANGE.md) for details. 53 | 54 | ## Documentation and Demo 55 | 56 | View the [plugin documentation](http://plugins.krajee.com/checkbox-x) and [plugin demos](http://plugins.krajee.com/checkbox-x/demo) at Krajee JQuery plugins. 57 | 58 | ## Pre-requisites 59 | 60 | 1. [Bootstrap 5.x or 4.x or 3.x](http://getbootstrap.com/) 61 | 2. Latest [JQuery](http://jquery.com/) 62 | 3. Most browsers supporting CSS3 & JQuery. 63 | 64 | > NOTE: You can use the sass branch for installation using bootstrap-sass dependency. The master branch can be used for installation using the default official bootstrap dependency. 65 | 66 | ## Installation 67 | 68 | ### Using Bower 69 | You can use the `bower` package manager to install. Run: 70 | 71 | bower install bootstrap-checkbox-x 72 | 73 | ### Using Composer 74 | You can use the `composer` package manager to install. Either run: 75 | 76 | $ php composer.phar require kartik-v/bootstrap-checkbox-x "@dev" 77 | 78 | or add: 79 | 80 | "kartik-v/bootstrap-checkbox-x": "@dev" 81 | 82 | to your composer.json file 83 | 84 | ### Manual Install 85 | 86 | You can also manually install the plugin easily to your project. Just download the source [ZIP](https://github.com/kartik-v/bootstrap-checkbox-x/zipball/master) or [TAR ball](https://github.com/kartik-v/bootstrap-checkbox-x/tarball/master) and extract the plugin assets (css and js folders) into your project. 87 | 88 | ## Usage 89 | 90 | Step 1: Load the following assets in your header. 91 | 92 | ```html 93 | 94 | 95 | 96 | 97 | 98 | 99 | ``` 100 | 101 | If you noticed, you need to load the `jquery.min.js` and `bootstrap.min.css` in addition to the `checkbox-x.min.css` and `checkbox-x.min.js` for 102 | the plugin to work with default settings. Loading the theme file `theme-krajee-flatblue.min.css` is optional and is needed if you want to override the default theme. Read the `theme` property of the plugin for understanding configuration details for themes. 103 | 104 | Step 2: Setup your input markup with `data-toggle="checkbox-x"` to automatically initialize the checkbox control 105 | ```html 106 | 107 | ``` 108 | 109 | Step 3: You can also initialize the plugin on your page using javascript as well, instead of using `data-toggle` attribute as above. For example, 110 | 111 | ```html 112 | 114 | 115 |
116 | 117 | 118 |
119 | 120 | 129 | ``` 130 | 131 | The `#input-id` is the identifier for the input on your page, which is hidden automatically by the plugin. 132 | 133 | Alternatively, you can directly call the plugin options by setting data attributes to your input field. 134 | 135 | > **Note:** You should wrap the input and label in a container with CSS class `cbx-krajee` for better alignment. You should also add the CSS class `cbx-label` to the labels for your checkbox inputs to style them similar to bootstrap's checkbox labels (which includes additional enhancements for contextual colors). 136 | 137 | ## License 138 | 139 | **bootstrap-checkbox-x** is released under the BSD 3-Clause License. See the bundled `LICENSE.md` for details. -------------------------------------------------------------------------------- /bower.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-checkbox-x", 3 | "version": "1.5.7", 4 | "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x", 5 | "authors": [ 6 | "Kartik Visweswaran " 7 | ], 8 | "description": "An extended checkbox plugin for bootstrap with three states and additional styles.", 9 | "main": [ 10 | "./css/checkbox-x.min.css", 11 | "./js/checkbox-x.min.js" 12 | ], 13 | "keywords": [ 14 | "bootstrap", 15 | "checkbox", 16 | "jquery", 17 | "three", 18 | "state", 19 | "indeterminate", 20 | "null" 21 | ], 22 | "dependencies": { 23 | "jquery": ">= 1.9.0", 24 | "bootstrap": ">= 3.0.0" 25 | }, 26 | "ignore": [ 27 | "**/.*", 28 | "node_modules", 29 | "composer.json", 30 | "examples", 31 | "bower_components", 32 | "test", 33 | "tests" 34 | ], 35 | "license": "BSD-3-Clause" 36 | } 37 | -------------------------------------------------------------------------------- /composer.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "kartik-v/bootstrap-checkbox-x", 3 | "description": "An extended checkbox plugin for bootstrap with three states and additional styles.", 4 | "keywords": [ 5 | "bootstrap", 6 | "checkbox", 7 | "jquery", 8 | "three", 9 | "state", 10 | "indeterminate", 11 | "null" 12 | ], 13 | "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x", 14 | "license": "BSD-3-Clause", 15 | "authors": [ 16 | { 17 | "name": "Kartik Visweswaran", 18 | "email": "kartikv2@gmail.com", 19 | "homepage": "http://www.krajee.com/" 20 | } 21 | ], 22 | "autoload": { 23 | "psr-4": { 24 | "kartik\\plugins\\checkbox\\": "" 25 | } 26 | }, 27 | "extra": { 28 | "branch-alias": { 29 | "dev-master": "1.5.x-dev" 30 | } 31 | } 32 | } -------------------------------------------------------------------------------- /css/checkbox-x.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * An extended checkbox plugin for Bootstrap 3 that allows three states and additional styles. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */ 10 | .cbx-loading { 11 | width: 25px; 12 | height: 25px; 13 | font-size: 0; 14 | color: #fff; 15 | background: transparent url('../img/loading.gif') top left no-repeat; 16 | border: none; 17 | } 18 | 19 | .cbx, .cbx-container { 20 | display: inline-block; 21 | cursor: pointer; 22 | text-align: center; 23 | vertical-align: middle; 24 | } 25 | 26 | .cbx { 27 | text-align: center; 28 | vertical-align: middle; 29 | border-radius: 3px; 30 | position: relative; 31 | } 32 | 33 | .cbx, .cbx-container, .cbx-label { 34 | -webkit-user-select: none; 35 | -moz-user-select: none; 36 | -ms-user-select: none; 37 | user-select: none; 38 | } 39 | 40 | .cbx-label { 41 | cursor: pointer; 42 | font-weight: 400; 43 | margin: 0; 44 | } 45 | 46 | .cbx-label.disabled { 47 | cursor: not-allowed; 48 | opacity: .65; 49 | } 50 | 51 | label + .cbx-container, .cbx-container + label, .cbx-container + .cbx-container { 52 | margin-left: 5px; 53 | } 54 | 55 | label .cbx { 56 | margin: 0 5px; 57 | } 58 | 59 | label + .cbx-block, .cbx-block + label, .cbx-block + .cbx-block, label .cbx-block { 60 | margin-left: 0; 61 | margin-right: 0; 62 | } 63 | 64 | .cbx-xs { 65 | width: 16px; 66 | height: 16px; 67 | font-size: 10px; 68 | } 69 | 70 | .cbx-sm { 71 | width: 20px; 72 | height: 20px; 73 | font-size: 13px; 74 | } 75 | 76 | .cbx-md { 77 | width: 24px; 78 | height: 24px; 79 | font-size: 15px; 80 | } 81 | 82 | .cbx-lg { 83 | border-radius: 4px; 84 | width: 30px; 85 | height: 30px; 86 | font-size: 20px; 87 | } 88 | 89 | .cbx-xl { 90 | border-radius: 5px; 91 | width: 36px; 92 | height: 36px; 93 | font-size: 24px; 94 | } 95 | 96 | .cbx-icon { 97 | position: absolute; 98 | margin: 1px; 99 | top: 0; 100 | left: 0; 101 | bottom: 0; 102 | right: 0; 103 | } 104 | 105 | .cbx-icon-krajee { 106 | position: absolute; 107 | top: 15%; 108 | bottom: 15%; 109 | left: 15%; 110 | right: 15%; 111 | } 112 | 113 | .cbx-active { 114 | border: 1px solid #ccc; 115 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 116 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 117 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 118 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 119 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 120 | color: #333; 121 | } 122 | 123 | .cbx-active:hover, .cbx-active:focus { 124 | border-color: #86b7fe; 125 | outline: 0; 126 | box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); 127 | } 128 | 129 | .cbx-disabled { 130 | color: #ddd; 131 | background: #fcfcfc; 132 | border: 1px solid #ddd; 133 | cursor: not-allowed; 134 | } 135 | 136 | .has-success .cbx-active { 137 | border-color: #198754; 138 | color: #198754; 139 | } 140 | 141 | .has-success .cbx-active:hover, .has-success .cbx-active:focus { 142 | border-color: #198754; 143 | box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%); 144 | } 145 | 146 | .has-warning .cbx-active { 147 | border-color: #ffc107; 148 | color: #ffc107; 149 | } 150 | 151 | .has-warning .cbx-active:hover, .has-warning .cbx-active:focus { 152 | border-color: #ffc107; 153 | box-shadow: 0 0 0 0.25rem rgb(255 193 7 / 25%); 154 | } 155 | 156 | .has-error .cbx-active { 157 | border-color: #dc3545; 158 | color: #dc3545; 159 | } 160 | 161 | .has-error .cbx-active:hover, .has-error .cbx-active:focus { 162 | border-color: #dc3545; 163 | box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%); 164 | } 165 | 166 | .has-success .cbx-label { 167 | color: #198754; 168 | } 169 | 170 | .has-warning .cbx-label { 171 | color: #ffc107; 172 | } 173 | 174 | .has-error .cbx-label { 175 | color: #dc3545; 176 | } 177 | 178 | .cbx-block { 179 | display: block; 180 | text-align: left; 181 | } 182 | 183 | .cbx-block + .cbx-block { 184 | margin: 5px 0 0 0; 185 | } 186 | 187 | .cbx-krajee, .cbx-enclosed { 188 | display: inline-flex; 189 | align-items: center; 190 | } 191 | 192 | .cbx-krajee input[type=checkbox] { 193 | margin: 3px 3px 0; 194 | } -------------------------------------------------------------------------------- /css/checkbox-x.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * An extended checkbox plugin for Bootstrap 3 that allows three states and additional styles. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */.cbx,.cbx-container{text-align:center;vertical-align:middle}.cbx-loading{width:25px;height:25px;font-size:0;color:#fff;background:url(../img/loading.gif) top left no-repeat;border:none}.cbx,.cbx-container{display:inline-block;cursor:pointer}.cbx{border-radius:3px;position:relative}.cbx,.cbx-container,.cbx-label{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.cbx-label{cursor:pointer;font-weight:400;margin:0}.cbx-label.disabled{cursor:not-allowed;opacity:.65}.cbx-container+.cbx-container,.cbx-container+label,label+.cbx-container{margin-left:5px}label .cbx{margin:0 5px}.cbx-block+.cbx-block,.cbx-block+label,label .cbx-block,label+.cbx-block{margin-left:0;margin-right:0}.cbx-xs{width:16px;height:16px;font-size:10px}.cbx-sm{width:20px;height:20px;font-size:13px}.cbx-md{width:24px;height:24px;font-size:15px}.cbx-lg{border-radius:4px;width:30px;height:30px;font-size:20px}.cbx-xl{border-radius:5px;width:36px;height:36px;font-size:24px}.cbx-icon{position:absolute;margin:1px;top:0;left:0;bottom:0;right:0}.cbx-icon-krajee{position:absolute;top:15%;bottom:15%;left:15%;right:15%}.cbx-active{border:1px solid #ccc;box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-box-shadow:inset 0 1px 1px rgba(0,0,0,.075);-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;color:#333}.cbx-active:focus,.cbx-active:hover{border-color:#86b7fe;outline:0;box-shadow:0 0 0 .25rem rgb(13 110 253 / 25%)}.cbx-disabled{color:#ddd;background:#fcfcfc;border:1px solid #ddd;cursor:not-allowed}.has-success .cbx-active{border-color:#198754;color:#198754}.has-success .cbx-active:focus,.has-success .cbx-active:hover{border-color:#198754;box-shadow:0 0 0 .25rem rgb(25 135 84 / 25%)}.has-warning .cbx-active{border-color:#ffc107;color:#ffc107}.has-warning .cbx-active:focus,.has-warning .cbx-active:hover{border-color:#ffc107;box-shadow:0 0 0 .25rem rgb(255 193 7 / 25%)}.has-error .cbx-active{border-color:#dc3545;color:#dc3545}.has-error .cbx-active:focus,.has-error .cbx-active:hover{border-color:#dc3545;box-shadow:0 0 0 .25rem rgb(220 53 69 / 25%)}.has-success .cbx-label{color:#198754}.has-warning .cbx-label{color:#ffc107}.has-error .cbx-label{color:#dc3545}.cbx-block{display:block;text-align:left}.cbx-block+.cbx-block{margin:5px 0 0}.cbx-enclosed,.cbx-krajee{display:inline-flex;align-items:center}.cbx-krajee input[type=checkbox]{margin:3px 3px 0} -------------------------------------------------------------------------------- /css/theme-krajee-flatblue.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * Krajee Flat Blue Theme for bootstrap-checkbox-x. Load this theme file after 6 | * `checkbox-x.css` on your page. 7 | * 8 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 9 | * For more Yii related demos visit http://demos.krajee.com 10 | */ 11 | .cbx-krajee-flatblue .cbx { 12 | border-radius:0; 13 | } 14 | 15 | .cbx-krajee-flatblue .cbx-xs .cbx-icon-null { 16 | padding: 4px; 17 | margin: 2px; 18 | } 19 | 20 | .cbx-krajee-flatblue .cbx-sm .cbx-icon-null { 21 | padding: 5px; 22 | margin: 3px; 23 | } 24 | 25 | .cbx-krajee-flatblue .cbx-md .cbx-icon-null { 26 | padding: 6px; 27 | margin: 4px; 28 | } 29 | 30 | .cbx-krajee-flatblue .cbx-lg .cbx-icon-null { 31 | padding: 8px; 32 | margin: 5px; 33 | } 34 | 35 | .cbx-krajee-flatblue .cbx-xl .cbx-icon-null { 36 | padding: 10px; 37 | margin: 6px; 38 | } 39 | 40 | .cbx-krajee-flatblue .cbx-disabled .cbx-icon-null { 41 | background-color: #aaa; 42 | } 43 | 44 | .cbx-krajee-flatblue .cbx-active .cbx-icon-null { 45 | background-color: #3c8dbc; 46 | } 47 | .cbx-krajee-flatblue .cbx-active { 48 | color: #3c8dbc; 49 | box-shadow: none; 50 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 51 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 52 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 53 | } 54 | 55 | .cbx-krajee-flatblue .cbx-active:hover, .cbx-krajee-flatblue .cbx-active:focus { 56 | border-color: #0073b7; 57 | outline: 0; 58 | box-shadow: none; 59 | } 60 | 61 | .cbx-krajee-flatblue .cbx-active:focus { 62 | color: #0073b7; 63 | } 64 | 65 | .cbx-krajee-flatblue .cbx-disabled { 66 | color: #ddd; 67 | background: #fcfcfc; 68 | border: 1px solid #ddd; 69 | cursor: not-allowed; 70 | } 71 | 72 | .has-success .cbx-krajee-flatblue .cbx-active { 73 | border-color: #00a65a; 74 | color: #00a65a; 75 | box-shadow: none; 76 | } 77 | 78 | .has-success .cbx-krajee-flatblue .cbx-active:hover, .has-success .cbx-krajee-flatblue .cbx-active:focus { 79 | border-color: #00a65a; 80 | box-shadow: none; 81 | } 82 | 83 | .has-warning .cbx-krajee-flatblue .cbx-active { 84 | border-color: #f39c12; 85 | color: #f39c12; 86 | box-shadow: none; 87 | } 88 | 89 | .has-warning .cbx-krajee-flatblue .cbx-active:hover, .has-warning .cbx-krajee-flatblue .cbx-active:focus { 90 | border-color: #f39c12; 91 | box-shadow: none; 92 | } 93 | 94 | .has-error .cbx-krajee-flatblue .cbx-active { 95 | border-color: #dd4b39; 96 | color: #dd4b39; 97 | box-shadow: none; 98 | } 99 | 100 | .has-error .cbx-krajee-flatblue .cbx-active:hover, .has-error .cbx-krajee-flatblue .cbx-active:focus { 101 | border-color: #dd4b39; 102 | box-shadow: none; 103 | } 104 | 105 | .has-error .cbx-krajee-flatblue .cbx-icon-null { 106 | background-color: #dd4b39; 107 | } 108 | 109 | .has-success .cbx-krajee-flatblue .cbx-icon-null { 110 | background-color: #00a65a; 111 | } 112 | 113 | .has-warning .cbx-krajee-flatblue .cbx-icon-null { 114 | background-color: #f39c12; 115 | } 116 | 117 | .has-error .cbx-krajee-flatblue .cbx-label { 118 | color: #dd4b39; 119 | } 120 | 121 | .has-success .cbx-krajee-flatblue .cbx-label { 122 | color: #00a65a; 123 | } 124 | 125 | .has-warning .cbx-krajee-flatblue .cbx-label { 126 | color: #f39c12; 127 | } -------------------------------------------------------------------------------- /css/theme-krajee-flatblue.min.css: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * Krajee Flat Blue Theme for bootstrap-checkbox-x. Load this theme file after 6 | * `checkbox-x.css` on your page. 7 | * 8 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 9 | * For more Yii related demos visit http://demos.krajee.com 10 | */.cbx-krajee-flatblue .cbx{border-radius:0}.cbx-krajee-flatblue .cbx-xs .cbx-icon-null{padding:4px;margin:2px}.cbx-krajee-flatblue .cbx-sm .cbx-icon-null{padding:5px;margin:3px}.cbx-krajee-flatblue .cbx-md .cbx-icon-null{padding:6px;margin:4px}.cbx-krajee-flatblue .cbx-lg .cbx-icon-null{padding:8px;margin:5px}.cbx-krajee-flatblue .cbx-xl .cbx-icon-null{padding:10px;margin:6px}.cbx-krajee-flatblue .cbx-disabled .cbx-icon-null{background-color:#aaa}.cbx-krajee-flatblue .cbx-active .cbx-icon-null{background-color:#3c8dbc}.cbx-krajee-flatblue .cbx-active{color:#3c8dbc;box-shadow:none;-webkit-transition:border-color ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;-o-transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s;transition:border-color ease-in-out .15s,box-shadow ease-in-out .15s}.cbx-krajee-flatblue .cbx-active:focus,.cbx-krajee-flatblue .cbx-active:hover{border-color:#0073b7;outline:0;box-shadow:none}.cbx-krajee-flatblue .cbx-active:focus{color:#0073b7}.cbx-krajee-flatblue .cbx-disabled{color:#ddd;background:#fcfcfc;border:1px solid #ddd;cursor:not-allowed}.has-success .cbx-krajee-flatblue .cbx-active{border-color:#00a65a;color:#00a65a;box-shadow:none}.has-success .cbx-krajee-flatblue .cbx-active:focus,.has-success .cbx-krajee-flatblue .cbx-active:hover{border-color:#00a65a;box-shadow:none}.has-warning .cbx-krajee-flatblue .cbx-active{border-color:#f39c12;color:#f39c12;box-shadow:none}.has-warning .cbx-krajee-flatblue .cbx-active:focus,.has-warning .cbx-krajee-flatblue .cbx-active:hover{border-color:#f39c12;box-shadow:none}.has-error .cbx-krajee-flatblue .cbx-active{border-color:#dd4b39;color:#dd4b39;box-shadow:none}.has-error .cbx-krajee-flatblue .cbx-active:focus,.has-error .cbx-krajee-flatblue .cbx-active:hover{border-color:#dd4b39;box-shadow:none}.has-error .cbx-krajee-flatblue .cbx-icon-null{background-color:#dd4b39}.has-success .cbx-krajee-flatblue .cbx-icon-null{background-color:#00a65a}.has-warning .cbx-krajee-flatblue .cbx-icon-null{background-color:#f39c12}.has-error .cbx-krajee-flatblue .cbx-label{color:#dd4b39}.has-success .cbx-krajee-flatblue .cbx-label{color:#00a65a}.has-warning .cbx-krajee-flatblue .cbx-label{color:#f39c12} -------------------------------------------------------------------------------- /examples/bs3.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | Krajee JQuery Plugins - © Kartik 16 | 17 | 18 | 19 | 20 | 21 | 50 | 61 | 62 | 63 |
64 |
65 |

Bootstrap Checkbox X 66 | Examples 67 | BS3.x © Krajee Solutions

68 |
69 |

Sizes

70 |
71 |
72 |
73 | 74 | 75 |
76 |   77 |
78 | 79 | 80 |
81 |   82 |
83 | 84 | 85 |
86 |
87 | 88 |
89 |
90 | 91 | 92 |
93 |   94 |
95 | 96 | 97 |
98 |   99 |
100 | 101 | 102 |
103 |
104 | 105 |
106 |
107 | 108 | 109 |
110 |   111 |
112 | 113 | 114 |
115 |   116 |
117 | 118 | 119 |
120 |
121 | 122 |
123 |
124 | 125 | 126 |
127 |   128 |
129 | 130 | 131 |
132 |   133 |
134 | 135 | 136 |
137 |
138 | 139 |
140 |
141 | 142 | 143 |
144 |   145 |
146 | 147 | 148 |
149 |   150 |
151 | 152 | 153 |
154 |
155 | 156 |
157 |
158 | 159 | 160 |
161 |   162 |
163 | 164 | 165 |
166 |   167 |
168 | 169 | 170 |
171 |
172 | 173 |

Label Positions

174 |
175 |
176 | 177 | 178 | 184 | 190 | 198 | 199 |
179 |
180 | 181 | 182 |
183 | 		185 |
186 | 187 | 188 |
189 | 		191 |
192 | 196 |
197 |
200 |
201 | 202 |

Contextual Colors

203 |
204 |
205 |
206 | 207 | 208 |
209 |
210 | 211 |
212 |
213 | 214 | 215 |
216 |
217 | 218 |
219 |
220 | 221 | 222 |
223 |
224 | 225 |

Three Values

226 |
227 |
228 |
229 | 230 |   231 | 232 |
233 |   234 |
235 | 236 |   237 | 238 |
239 |   240 |
241 | 242 |   243 | 244 |
245 |
246 | 247 |

Use Alternate Crossed Icon

248 |
249 | 250 |
251 |
252 | 253 | 254 |
255 |   256 |
257 | 258 | 259 |
260 |   261 |
262 | 263 | 264 |
265 |   266 |
267 | 268 | 269 |
270 |   271 |
272 | 273 | 274 |
275 |
276 | 277 |

Use Custom Icon Markup

278 |
279 |
280 |
281 | 284 |
285 |
286 | 287 |

Custom Icon CSS

288 |
289 |
290 |
291 | 292 | 293 |
294 |
295 | 296 | 315 | 316 |

Enclosed Label (Native 2 state)

317 |
318 |
319 |
320 |
321 | 324 |
325 |
326 |
327 |
Value:
328 |
329 |
330 | 331 | 332 |

Non Enclosed Label (Native 2 state)

333 |
334 |
335 |
336 |
337 | 338 | 339 |
340 |
341 |
342 |
Value:
343 |
344 |
345 | 346 | 347 |

Enclosed Label (Native 3 state)

348 |
349 |
350 |
351 |
352 | 353 |
354 |
355 |
356 |
Value:
357 |
358 |
359 | 360 | 361 |

Non Enclosed Label (Native 3 state)

362 |
363 |
364 |
365 |
366 | 367 | 368 |
369 |
370 |
371 |
Value:
372 |
373 |
374 | 375 | 376 |

Enclosed Label (2 state)

377 |
378 |
379 |
380 |
381 | 384 |
385 |
386 |
387 |
Value:
388 |
389 |
390 | 391 | 392 |

Non Enclosed Label (2 state)

393 |
394 |
395 |
396 |
397 | 398 | 399 |
400 |
401 |
402 |
Value:
403 |
404 |
405 | 406 | 407 |

Special Enclosed Label (2 state)

408 |
409 |
410 |
411 |
412 | 415 |
416 |
417 |
418 |
Value:
419 |
420 |
421 | 422 | 423 |

Enclosed Label (3 state)

424 |
425 |
426 |
427 |
428 | 431 |
432 |
433 |
434 |
Value:
435 |
436 |
437 | 438 | 439 |

Non Enclosed Label (3 state)

440 |
441 |
442 |
443 |
444 | 445 | 446 |
447 |
448 |
449 |
Value:
450 |
451 |
452 | 453 | 454 |

Text Input Enclosed Label (2 state)

455 |
456 |
457 |
458 |
459 | 461 |
462 |
463 |
464 |
Value:
465 |
466 |
467 | 468 | 469 |

Text Input Non Enclosed Label (2 state)

470 |
471 |
472 |
473 |
474 | 476 |
477 |
478 |
479 |
Value:
480 |
481 |
482 | 483 | 484 |

Text Input Enclosed Label (3 state)

485 |
486 |
487 |
488 |
489 | 491 |
492 |
493 |
494 |
Value:
495 |
496 |
497 | 498 | 499 |

Text Input Non Enclosed Label (3 state)

500 |
501 |
502 |
503 |
504 | 505 | 506 |
507 |
508 |
509 |
Value:
510 |
511 |
512 | 513 | 514 |

Select Input Enclosed Label (2 state)

515 |
516 |
517 |
518 |
519 | 526 |
527 |
528 |
529 |
Value:
530 |
531 |
532 | 533 | 534 |

Select Input Non-Enclosed Label (2 state)

535 |
536 |
537 |
538 |
539 | 544 | 545 |
546 |
547 |
548 |
Value:
549 |
550 |
551 | 552 | 553 |

Select Input Enclosed Label (3 state)

554 |
555 |
556 |
557 |
558 | 565 |
566 |
567 |
568 |
Value:
569 |
570 |
571 | 572 | 573 |

Select Input Non-Enclosed Label (3 state)

574 |
575 |
576 |
577 |
578 | 583 | 584 |
585 |
586 |
587 |
Value:
588 |
589 |
590 | 591 | 592 |

Plugin Methods

593 |
594 |
595 |
596 | 597 |
598 |
599 | 600 | 601 |
602 | 603 |

THEMING (Krajee Flat Blue Theme)

604 |
605 |

Sizes

606 |
607 |
608 |
609 | 610 | 612 |
613 |   614 |
615 | 616 | 618 |
619 |   620 |
621 | 622 | 624 |
625 |
626 | 627 |
628 |
629 | 630 | 632 |
633 |   634 |
635 | 636 | 638 |
639 |   640 |
641 | 642 | 644 |
645 |
646 | 647 |
648 |
649 | 650 | 652 |
653 |   654 |
655 | 656 | 658 |
659 |   660 |
661 | 662 | 664 |
665 |
666 | 667 |
668 |
669 | 670 | 672 |
673 |   674 |
675 | 676 | 678 |
679 |   680 |
681 | 682 | 684 |
685 |
686 | 687 |
688 |
689 | 690 | 692 |
693 |   694 |
695 | 696 | 698 |
699 |   700 |
701 | 702 | 704 |
705 |
706 | 707 |
708 |
709 | 710 | 712 |
713 |   714 |
715 | 716 | 718 |
719 |   720 |
721 | 722 | 724 |
725 |
726 | 727 |

Label Positions

728 |
729 |
730 |
731 | 732 | 734 |
735 | 736 | 737 | 738 |
739 | 741 | 742 |
743 | 744 | 745 | 746 |
747 | 752 |
753 |
754 | 755 |

Contextual Colors

756 |
757 |
758 |
759 | 760 | 763 |
764 |
765 | 766 |
767 |
768 | 769 | 771 |
772 |
773 | 774 |
775 |
776 | 777 | 779 |
780 |
781 | 801 |
802 |
803 | 804 | 805 | -------------------------------------------------------------------------------- /examples/bs4.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | Krajee JQuery Plugins - © Kartik 16 | 17 | 18 | 19 | 20 | 21 | 50 | 51 | 52 |
53 |
54 |

Bootstrap Checkbox X 55 | Examples 56 | BS4.x © Krajee Solutions

57 |
58 |

Sizes

59 |
60 |
61 |
62 | 63 | 64 |
65 |   66 |
67 | 68 | 69 |
70 |   71 |
72 | 73 | 74 |
75 |
76 | 77 |
78 |
79 | 80 | 81 |
82 |   83 |
84 | 85 | 86 |
87 |   88 |
89 | 90 | 91 |
92 |
93 | 94 |
95 |
96 | 97 | 98 |
99 |   100 |
101 | 102 | 103 |
104 |   105 |
106 | 107 | 108 |
109 |
110 | 111 |
112 |
113 | 114 | 115 |
116 |   117 |
118 | 119 | 120 |
121 |   122 |
123 | 124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 | 132 |
133 |   134 |
135 | 136 | 137 |
138 |   139 |
140 | 141 | 142 |
143 |
144 | 145 |
146 |
147 | 148 | 149 |
150 |   151 |
152 | 153 | 154 |
155 |   156 |
157 | 158 | 159 |
160 |
161 | 162 |

Label Positions

163 |
164 |
165 | 166 | 167 | 173 | 179 | 187 | 188 |
168 |
169 | 170 | 171 |
172 | 		174 |
175 | 176 | 177 |
178 | 		180 |
181 | 185 |
186 |
189 |
190 | 191 |

Contextual Colors

192 |
193 |
194 |
195 | 196 | 197 |
198 |
199 | 200 |
201 |
202 | 203 | 204 |
205 |
206 | 207 |
208 |
209 | 210 | 211 |
212 |
213 | 214 |

Three Values

215 |
216 |
217 |
218 | 219 |   220 | 221 |
222 |   223 |
224 | 225 |   226 | 227 |
228 |   229 |
230 | 231 |   232 | 233 |
234 |
235 | 236 |

Use Alternate Crossed Icon

237 |
238 |
239 |
240 | 241 | 242 |
243 |   244 |
245 | 246 | 247 |
248 |   249 |
250 | 251 | 252 |
253 |   254 |
255 | 256 | 257 |
258 |   259 |
260 | 261 | 262 |
263 |
264 | 265 |

Use Custom Icon Markup

266 |
267 |
268 |
269 | 272 |
273 |
274 | 275 |

Custom Icon CSS

276 |
277 |
278 |
279 | 280 | 281 |
282 |
283 | 284 | 303 | 304 |

Enclosed Label (Native 2 state)

305 |
306 |
307 |
308 |
309 | 312 |
313 |
314 |
315 |
Value:
316 |
317 |
318 | 319 | 320 |

Non Enclosed Label (Native 2 state)

321 |
322 |
323 |
324 |
325 | 326 | 327 |
328 |
329 |
330 |
Value:
331 |
332 |
333 | 334 | 335 |

Enclosed Label (Native 3 state)

336 |
337 |
338 |
339 |
340 | 341 |
342 |
343 |
344 |
Value:
345 |
346 |
347 | 348 | 349 |

Non Enclosed Label (Native 3 state)

350 |
351 |
352 |
353 |
354 | 355 | 356 |
357 |
358 |
359 |
Value:
360 |
361 |
362 | 363 | 364 |

Enclosed Label (2 state)

365 |
366 |
367 |
368 |
369 | 372 |
373 |
374 |
375 |
Value:
376 |
377 |
378 | 379 | 380 |

Non Enclosed Label (2 state)

381 |
382 |
383 |
384 |
385 | 386 | 387 |
388 |
389 |
390 |
Value:
391 |
392 |
393 | 394 | 395 |

Special Enclosed Label (2 state)

396 |
397 |
398 |
399 |
400 | 403 |
404 |
405 |
406 |
Value:
407 |
408 |
409 | 410 | 411 |

Enclosed Label (3 state)

412 |
413 |
414 |
415 |
416 | 419 |
420 |
421 |
422 |
Value:
423 |
424 |
425 | 426 | 427 |

Non Enclosed Label (3 state)

428 |
429 |
430 |
431 |
432 | 433 | 434 |
435 |
436 |
437 |
Value:
438 |
439 |
440 | 441 | 442 |

Text Input Enclosed Label (2 state)

443 |
444 |
445 |
446 |
447 | 449 |
450 |
451 |
452 |
Value:
453 |
454 |
455 | 456 | 457 |

Text Input Non Enclosed Label (2 state)

458 |
459 |
460 |
461 |
462 | 464 |
465 |
466 |
467 |
Value:
468 |
469 |
470 | 471 | 472 |

Text Input Enclosed Label (3 state)

473 |
474 |
475 |
476 |
477 | 479 |
480 |
481 |
482 |
Value:
483 |
484 |
485 | 486 | 487 |

Text Input Non Enclosed Label (3 state)

488 |
489 |
490 |
491 |
492 | 493 | 494 |
495 |
496 |
497 |
Value:
498 |
499 |
500 | 501 | 502 |

Select Input Enclosed Label (2 state)

503 |
504 |
505 |
506 |
507 | 514 |
515 |
516 |
517 |
Value:
518 |
519 |
520 | 521 | 522 |

Select Input Non-Enclosed Label (2 state)

523 |
524 |
525 |
526 |
527 | 532 | 533 |
534 |
535 |
536 |
Value:
537 |
538 |
539 | 540 | 541 |

Select Input Enclosed Label (3 state)

542 |
543 |
544 |
545 |
546 | 553 |
554 |
555 |
556 |
Value:
557 |
558 |
559 | 560 | 561 |

Select Input Non-Enclosed Label (3 state)

562 |
563 |
564 |
565 |
566 | 571 | 572 |
573 |
574 |
575 |
Value:
576 |
577 |
578 | 579 | 580 |

Plugin Methods

581 |
582 |
583 |
584 | 585 |
586 |
587 | 588 | 589 |
590 | 591 |

THEMING (Krajee Flat Blue Theme)

592 |
593 |

Sizes

594 |
595 |
596 |
597 | 598 | 600 |
601 |   602 |
603 | 604 | 606 |
607 |   608 |
609 | 610 | 612 |
613 |
614 | 615 |
616 |
617 | 618 | 620 |
621 |   622 |
623 | 624 | 626 |
627 |   628 |
629 | 630 | 632 |
633 |
634 | 635 |
636 |
637 | 638 | 640 |
641 |   642 |
643 | 644 | 646 |
647 |   648 |
649 | 650 | 652 |
653 |
654 | 655 |
656 |
657 | 658 | 660 |
661 |   662 |
663 | 664 | 666 |
667 |   668 |
669 | 670 | 672 |
673 |
674 | 675 |
676 |
677 | 678 | 680 |
681 |   682 |
683 | 684 | 686 |
687 |   688 |
689 | 690 | 692 |
693 |
694 | 695 |
696 |
697 | 698 | 700 |
701 |   702 |
703 | 704 | 706 |
707 |   708 |
709 | 710 | 712 |
713 |
714 | 715 |

Label Positions

716 |
717 |
718 |
719 | 720 | 722 |
723 | 724 | 725 | 726 |
727 | 729 | 730 |
731 | 732 | 733 | 734 |
735 | 740 |
741 |
742 | 743 |

Contextual Colors

744 |
745 |
746 |
747 | 748 | 751 |
752 |
753 | 754 |
755 |
756 | 757 | 759 |
760 |
761 | 762 |
763 |
764 | 765 | 767 |
768 |
769 | 789 |
790 |
791 | 792 | 793 | -------------------------------------------------------------------------------- /examples/bs5.html: -------------------------------------------------------------------------------- 1 | 10 | 11 | 12 | 13 | 14 | 15 | Krajee JQuery Plugins - © Kartik 16 | 17 | 18 | 19 | 20 | 21 | 50 | 51 | 52 |
53 |
54 |

Bootstrap Checkbox X 55 | Examples 56 | BS5.x © Krajee Solutions

57 |
58 |

Sizes

59 |
60 |
61 |
62 | 63 | 64 |
65 |   66 |
67 | 68 | 69 |
70 |   71 |
72 | 73 | 74 |
75 |
76 | 77 |
78 |
79 | 80 | 81 |
82 |   83 |
84 | 85 | 86 |
87 |   88 |
89 | 90 | 91 |
92 |
93 | 94 |
95 |
96 | 97 | 98 |
99 |   100 |
101 | 102 | 103 |
104 |   105 |
106 | 107 | 108 |
109 |
110 | 111 |
112 |
113 | 114 | 115 |
116 |   117 |
118 | 119 | 120 |
121 |   122 |
123 | 124 | 125 |
126 |
127 | 128 |
129 |
130 | 131 | 132 |
133 |   134 |
135 | 136 | 137 |
138 |   139 |
140 | 141 | 142 |
143 |
144 | 145 |
146 |
147 | 148 | 149 |
150 |   151 |
152 | 153 | 154 |
155 |   156 |
157 | 158 | 159 |
160 |
161 | 162 |

Label Positions

163 |
164 |
165 | 166 | 167 | 173 | 179 | 187 | 188 |
168 |
169 | 170 | 171 |
172 | 		174 |
175 | 176 | 177 |
178 | 		180 |
181 | 185 |
186 |
189 |
190 | 191 |

Contextual Colors

192 |
193 |
194 |
195 | 196 | 197 |
198 |
199 | 200 |
201 |
202 | 203 | 204 |
205 |
206 | 207 |
208 |
209 | 210 | 211 |
212 |
213 | 214 |

Three Values

215 |
216 |
217 |
218 | 219 |   220 | 221 |
222 |   223 |
224 | 225 |   226 | 227 |
228 |   229 |
230 | 231 |   232 | 233 |
234 |
235 | 236 |

Use Alternate Crossed Icon

237 |
238 |
239 |
240 | 241 | 242 |
243 |   244 |
245 | 246 | 247 |
248 |   249 |
250 | 251 | 252 |
253 |   254 |
255 | 256 | 257 |
258 |   259 |
260 | 261 | 262 |
263 |
264 | 265 |

Use Custom Icon Markup

266 |
267 |
268 |
269 | 272 |
273 |
274 | 275 |

Custom Icon CSS

276 |
277 |
278 |
279 | 280 | 281 |
282 |
283 | 284 | 303 | 304 |

Enclosed Label (Native 2 state)

305 |
306 |
307 |
308 |
309 | 312 |
313 |
314 |
315 |
Value:
316 |
317 |
318 | 319 | 320 |

Non Enclosed Label (Native 2 state)

321 |
322 |
323 |
324 |
325 | 326 | 327 |
328 |
329 |
330 |
Value:
331 |
332 |
333 | 334 | 335 |

Enclosed Label (Native 3 state)

336 |
337 |
338 |
339 |
340 | 341 |
342 |
343 |
344 |
Value:
345 |
346 |
347 | 348 | 349 |

Non Enclosed Label (Native 3 state)

350 |
351 |
352 |
353 |
354 | 355 | 356 |
357 |
358 |
359 |
Value:
360 |
361 |
362 | 363 | 364 |

Enclosed Label (2 state)

365 |
366 |
367 |
368 |
369 | 372 |
373 |
374 |
375 |
Value:
376 |
377 |
378 | 379 | 380 |

Non Enclosed Label (2 state)

381 |
382 |
383 |
384 |
385 | 386 | 387 |
388 |
389 |
390 |
Value:
391 |
392 |
393 | 394 | 395 |

Special Enclosed Label (2 state)

396 |
397 |
398 |
399 |
400 | 403 |
404 |
405 |
406 |
Value:
407 |
408 |
409 | 410 | 411 |

Enclosed Label (3 state)

412 |
413 |
414 |
415 |
416 | 419 |
420 |
421 |
422 |
Value:
423 |
424 |
425 | 426 | 427 |

Non Enclosed Label (3 state)

428 |
429 |
430 |
431 |
432 | 433 | 434 |
435 |
436 |
437 |
Value:
438 |
439 |
440 | 441 | 442 |

Text Input Enclosed Label (2 state)

443 |
444 |
445 |
446 |
447 | 449 |
450 |
451 |
452 |
Value:
453 |
454 |
455 | 456 | 457 |

Text Input Non Enclosed Label (2 state)

458 |
459 |
460 |
461 |
462 | 464 |
465 |
466 |
467 |
Value:
468 |
469 |
470 | 471 | 472 |

Text Input Enclosed Label (3 state)

473 |
474 |
475 |
476 |
477 | 479 |
480 |
481 |
482 |
Value:
483 |
484 |
485 | 486 | 487 |

Text Input Non Enclosed Label (3 state)

488 |
489 |
490 |
491 |
492 | 493 | 494 |
495 |
496 |
497 |
Value:
498 |
499 |
500 | 501 | 502 |

Select Input Enclosed Label (2 state)

503 |
504 |
505 |
506 |
507 | 514 |
515 |
516 |
517 |
Value:
518 |
519 |
520 | 521 | 522 |

Select Input Non-Enclosed Label (2 state)

523 |
524 |
525 |
526 |
527 | 532 | 533 |
534 |
535 |
536 |
Value:
537 |
538 |
539 | 540 | 541 |

Select Input Enclosed Label (3 state)

542 |
543 |
544 |
545 |
546 | 553 |
554 |
555 |
556 |
Value:
557 |
558 |
559 | 560 | 561 |

Select Input Non-Enclosed Label (3 state)

562 |
563 |
564 |
565 |
566 | 571 | 572 |
573 |
574 |
575 |
Value:
576 |
577 |
578 | 579 | 580 |

Plugin Methods

581 |
582 |
583 |
584 | 585 |
586 |
587 | 588 | 589 |
590 | 591 |

THEMING (Krajee Flat Blue Theme)

592 |
593 |

Sizes

594 |
595 |
596 |
597 | 598 | 600 |
601 |   602 |
603 | 604 | 606 |
607 |   608 |
609 | 610 | 612 |
613 |
614 | 615 |
616 |
617 | 618 | 620 |
621 |   622 |
623 | 624 | 626 |
627 |   628 |
629 | 630 | 632 |
633 |
634 | 635 |
636 |
637 | 638 | 640 |
641 |   642 |
643 | 644 | 646 |
647 |   648 |
649 | 650 | 652 |
653 |
654 | 655 |
656 |
657 | 658 | 660 |
661 |   662 |
663 | 664 | 666 |
667 |   668 |
669 | 670 | 672 |
673 |
674 | 675 |
676 |
677 | 678 | 680 |
681 |   682 |
683 | 684 | 686 |
687 |   688 |
689 | 690 | 692 |
693 |
694 | 695 |
696 |
697 | 698 | 700 |
701 |   702 |
703 | 704 | 706 |
707 |   708 |
709 | 710 | 712 |
713 |
714 | 715 |

Label Positions

716 |
717 |
718 |
719 | 720 | 722 |
723 | 724 | 725 | 726 |
727 | 729 | 730 |
731 | 732 | 733 | 734 |
735 | 740 |
741 |
742 | 743 |

Contextual Colors

744 |
745 |
746 |
747 | 748 | 751 |
752 |
753 | 754 |
755 |
756 | 757 | 759 |
760 |
761 | 762 |
763 |
764 | 765 | 767 |
768 |
769 | 789 |
790 |
791 | 792 | 793 | -------------------------------------------------------------------------------- /img/loading.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/kartik-v/bootstrap-checkbox-x/1060db69ad2519a2b36cf5e0e28f542c21135672/img/loading.gif -------------------------------------------------------------------------------- /js/checkbox-x.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * An extended checkbox plugin for bootstrap with three states and additional styles. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */ 10 | (function (factory) { 11 | 'use strict'; 12 | if (typeof define === 'function' && define.amd) { 13 | define(['jquery'], factory); 14 | } else if (typeof module === 'object' && typeof module.exports === 'object') { 15 | factory(require('jquery')); 16 | } else { 17 | factory(window.jQuery); 18 | } 19 | }(function ($) { 20 | "use strict"; 21 | 22 | var $h, CheckboxX; 23 | 24 | /** 25 | * Global Helper 26 | */ 27 | $h = { 28 | CHECKED: '', 29 | CROSSED: '', 30 | INDETERMINATE: '' 31 | }; 32 | 33 | /** 34 | * CheckboxX Constructor 35 | */ 36 | CheckboxX = function (element, options) { 37 | var self = this; 38 | self.$element = $(element); 39 | self.disabled = self.$element.attr('disabled') || self.$element.attr('readonly'); 40 | self.initialValue = self.$element.val(); 41 | self.init(options); 42 | }; 43 | 44 | /** 45 | * CheckboxX Prototype 46 | */ 47 | CheckboxX.prototype = { 48 | constructor: CheckboxX, 49 | init: function (options) { 50 | var self = this, $el = self.$element, isCbx = $el.is(':checkbox'), isSelect = $el.is('select'), 51 | isText = !isCbx && !isSelect, enclosedSelect = isSelect && !options.enclosedLabel, 52 | css = options.inline ? 'cbx-container' : 'cbx-container cbx-block'; 53 | if (options.theme) { 54 | css += ' cbx-' + options.theme; 55 | } 56 | if (!options.iconChecked) { 57 | options.iconChecked = options.useCrossIcon ? $h.CROSSED : $h.CHECKED 58 | } 59 | self.options = options; 60 | self.clearEvents(); 61 | $el.removeClass('cbx-loading'); 62 | if (!self.initCheckbox()) { 63 | return; 64 | } 65 | if (self.$container === undefined) { 66 | self.$container = $(document.createElement("div")).addClass(css).html(self.render()); 67 | self.$container.insertBefore($el).append($el); 68 | $el.hide(); 69 | } else { 70 | self.$container.before($el).addClass(css).html(self.render()).append($el); 71 | } 72 | self.$cbx = self.$container.find('.cbx'); 73 | $el.closest('form').on('reset.checkbox', function () { 74 | self.reset(); 75 | }); 76 | self.$cbx.off('click.checkbox keyup.checkbox').on('click.checkbox', function () { 77 | if (isCbx && !options.enclosedLabel && !options.useNative && !self.disabled) { 78 | $el.trigger('change'); 79 | return; 80 | } 81 | if (isText && !options.enclosedLabel || enclosedSelect) { 82 | self.change(); 83 | } 84 | }).on('keyup.checkbox', function (e) { 85 | if (e.which === 32) { 86 | self.change(); 87 | e.preventDefault(); 88 | } 89 | }); 90 | if (isText || isSelect) { 91 | $el.on('click.checkbox', function () { 92 | self.change(); 93 | }); 94 | } 95 | if (options.enclosedLabel) { 96 | self.$container.closest('.cbx-label').removeClass('cbx-enclosed').addClass('cbx-enclosed'); 97 | } 98 | }, 99 | initCheckbox: function () { 100 | var self = this, $el = self.$element, val, options = self.options; 101 | if (!$el.is(':checkbox')) { 102 | return true; 103 | } 104 | if (!$el.prop('checked')) { 105 | val = $el.prop('indeterminate') ? options.valueNull : options.valueUnchecked; 106 | $el.val(val); 107 | } 108 | $el.on('change.checkbox', function () { 109 | self.change(); 110 | }); 111 | if (options.useNative) { 112 | $el.removeClass('cbx-loading'); 113 | return false; 114 | } 115 | return true; 116 | }, 117 | change: function () { 118 | var self = this, $el = self.$element, newVal; 119 | if (self.disabled) { 120 | return; 121 | } 122 | newVal = self.getValue(); 123 | $el.val(newVal); 124 | self.validateCheckbox(newVal); 125 | if (!self.options.useNative) { 126 | self.$cbx.html(self.getIndicator()); 127 | } 128 | }, 129 | getValue: function () { 130 | var self = this, val = self.$element.val(), options = self.options; 131 | switch (val) { 132 | case options.valueUnchecked: 133 | return self.options.threeState ? options.valueNull : options.valueChecked; 134 | case options.valueChecked: 135 | return options.valueUnchecked; 136 | default: 137 | return options.valueChecked; 138 | } 139 | }, 140 | setCheckboxProp: function (newVal) { 141 | var self = this, $el = self.$element, options = self.options; 142 | $el.prop('indeterminate', false).prop('checked', false); 143 | switch (newVal) { 144 | case options.valueChecked: 145 | $el.prop('checked', true); 146 | break; 147 | case options.valueUnchecked: 148 | break; 149 | default: 150 | if (options.threeState) { 151 | $el.prop('indeterminate', true); 152 | } 153 | break; 154 | } 155 | }, 156 | validateCheckbox: function (newVal) { 157 | var self = this, $el = self.$element, isCbx = $el.is(':checkbox'); 158 | if (!isCbx) { 159 | $el.trigger('change'); 160 | return; 161 | } 162 | self.setCheckboxProp(newVal); 163 | }, 164 | clearEvents: function () { 165 | var self = this, $el = self.$element, $cbx = self.$container ? self.$container.find('.cbx') : null; 166 | $el.off('.checkbox'); 167 | if ($cbx) { 168 | $cbx.off('.checkbox'); 169 | } 170 | }, 171 | destroy: function () { 172 | var self = this, $el = self.$element; 173 | self.clearEvents(); 174 | self.$container.before($el).remove(); 175 | $el.removeData().show(); 176 | }, 177 | reset: function () { 178 | var self = this, $el = self.$element; 179 | $el.val(self.initialValue); 180 | self.refresh(); 181 | $el.trigger('checkbox:resetinput'); 182 | }, 183 | refresh: function (options) { 184 | var self = this; 185 | if (options) { 186 | self.init($.extend(self.options, options)); 187 | } else { 188 | self.disabled = self.$element.attr('disabled') || self.$element.attr('readonly'); 189 | self.init(self.options); 190 | } 191 | self.initialValue = self.$element.val(); 192 | }, 193 | getIndicator: function (hasThreeState) { 194 | var self = this, options = self.options, icon = options.iconUnchecked, $el = self.$element, val = $el.val(), 195 | css = options.iconUncheckedCss, isInd = $el.is(':checkbox') ? $el.prop('indeterminate') : 196 | (val !== options.valueUnchecked && (options.threeState || hasThreeState)); 197 | if (val === options.valueChecked) { 198 | icon = options.iconChecked; 199 | css = options.iconCheckedCss; 200 | } else if (isInd) { 201 | icon = options.iconNull 202 | css = options.iconNullCss; 203 | } 204 | return '' + icon + ''; 205 | }, 206 | render: function () { 207 | var self = this, options = self.options, icon = self.getIndicator(options.allowThreeValOnInit), 208 | tab = self.disabled || !options.tabindex ? '' : ' tabindex="' + options.tabindex + '"', 209 | size = options.size, css = 'cbx cbx-' + size + (self.disabled ? ' cbx-disabled' : ' cbx-active'); 210 | return '
' + icon + '
'; 211 | } 212 | }; 213 | 214 | $.fn.checkboxX = function (option) { 215 | var args = Array.apply(null, arguments), retvals = []; 216 | args.shift(); 217 | this.each(function () { 218 | var $this = $(this), data = $this.data('checkboxX'), options = typeof option === 'object' && option; 219 | if (!data) { 220 | data = new CheckboxX(this, $.extend(true, {}, $.fn.checkboxX.defaults, options, $this.data())); 221 | $this.data('checkboxX', data); 222 | } 223 | if (typeof option === 'string') { 224 | retvals.push(data[option].apply(data, args)); 225 | } 226 | }); 227 | switch (retvals.length) { 228 | case 0: 229 | return this; 230 | case 1: 231 | return retvals[0]; 232 | default: 233 | return retvals; 234 | } 235 | }; 236 | 237 | $.fn.checkboxX.defaults = { 238 | theme: '', 239 | threeState: true, 240 | inline: true, 241 | iconChecked: null, 242 | iconUnchecked: '', 243 | iconNull: $h.INDETERMINATE, 244 | iconCheckedCss: '', 245 | iconUncheckedCss: '', 246 | iconNullCss: '', 247 | useCrossIcon: false, 248 | valueChecked: '1', 249 | valueUnchecked: '0', 250 | valueNull: '', 251 | size: 'md', 252 | enclosedLabel: false, 253 | useNative: false, 254 | allowThreeValOnInit: false, 255 | tabindex: "1000" 256 | }; 257 | 258 | $.fn.checkboxX.Constructor = CheckboxX; 259 | 260 | $('input[data-toggle="checkbox-x"]').addClass('cbx-loading'); 261 | 262 | $(document).ready(function () { 263 | $('input[data-toggle="checkbox-x"]').checkboxX(); 264 | }); 265 | })); -------------------------------------------------------------------------------- /js/checkbox-x.min.js: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * An extended checkbox plugin for bootstrap with three states and additional styles. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */!function(e){"use strict";"function"==typeof define&&define.amd?define(["jquery"],e):e("object"==typeof module&&"object"==typeof module.exports?require("jquery"):window.jQuery)}(function(e){"use strict";var n,t;n={CHECKED:'',CROSSED:'',INDETERMINATE:''},t=function(n,t){var c=this;c.$element=e(n),c.disabled=c.$element.attr("disabled")||c.$element.attr("readonly"),c.initialValue=c.$element.val(),c.init(t)},t.prototype={constructor:t,init:function(t){var c=this,a=c.$element,o=a.is(":checkbox"),i=a.is("select"),l=!o&&!i,s=i&&!t.enclosedLabel,r=t.inline?"cbx-container":"cbx-container cbx-block";t.theme&&(r+=" cbx-"+t.theme),t.iconChecked||(t.iconChecked=t.useCrossIcon?n.CROSSED:n.CHECKED),c.options=t,c.clearEvents(),a.removeClass("cbx-loading"),c.initCheckbox()&&(void 0===c.$container?(c.$container=e(document.createElement("div")).addClass(r).html(c.render()),c.$container.insertBefore(a).append(a),a.hide()):c.$container.before(a).addClass(r).html(c.render()).append(a),c.$cbx=c.$container.find(".cbx"),a.closest("form").on("reset.checkbox",function(){c.reset()}),c.$cbx.off("click.checkbox keyup.checkbox").on("click.checkbox",function(){return!o||t.enclosedLabel||t.useNative||c.disabled?void((l&&!t.enclosedLabel||s)&&c.change()):void a.trigger("change")}).on("keyup.checkbox",function(e){32===e.which&&(c.change(),e.preventDefault())}),(l||i)&&a.on("click.checkbox",function(){c.change()}),t.enclosedLabel&&c.$container.closest(".cbx-label").removeClass("cbx-enclosed").addClass("cbx-enclosed"))},initCheckbox:function(){var e,n=this,t=n.$element,c=n.options;return t.is(":checkbox")?(t.prop("checked")||(e=t.prop("indeterminate")?c.valueNull:c.valueUnchecked,t.val(e)),t.on("change.checkbox",function(){n.change()}),c.useNative?(t.removeClass("cbx-loading"),!1):!0):!0},change:function(){var e,n=this,t=n.$element;n.disabled||(e=n.getValue(),t.val(e),n.validateCheckbox(e),n.options.useNative||n.$cbx.html(n.getIndicator()))},getValue:function(){var e=this,n=e.$element.val(),t=e.options;switch(n){case t.valueUnchecked:return e.options.threeState?t.valueNull:t.valueChecked;case t.valueChecked:return t.valueUnchecked;default:return t.valueChecked}},setCheckboxProp:function(e){var n=this,t=n.$element,c=n.options;switch(t.prop("indeterminate",!1).prop("checked",!1),e){case c.valueChecked:t.prop("checked",!0);break;case c.valueUnchecked:break;default:c.threeState&&t.prop("indeterminate",!0)}},validateCheckbox:function(e){var n=this,t=n.$element,c=t.is(":checkbox");return c?void n.setCheckboxProp(e):void t.trigger("change")},clearEvents:function(){var e=this,n=e.$element,t=e.$container?e.$container.find(".cbx"):null;n.off(".checkbox"),t&&t.off(".checkbox")},destroy:function(){var e=this,n=e.$element;e.clearEvents(),e.$container.before(n).remove(),n.removeData().show()},reset:function(){var e=this,n=e.$element;n.val(e.initialValue),e.refresh(),n.trigger("checkbox:resetinput")},refresh:function(n){var t=this;n?t.init(e.extend(t.options,n)):(t.disabled=t.$element.attr("disabled")||t.$element.attr("readonly"),t.init(t.options)),t.initialValue=t.$element.val()},getIndicator:function(e){var n=this,t=n.options,c=t.iconUnchecked,a=n.$element,o=a.val(),i=t.iconUncheckedCss,l=a.is(":checkbox")?a.prop("indeterminate"):o!==t.valueUnchecked&&(t.threeState||e);return o===t.valueChecked?(c=t.iconChecked,i=t.iconCheckedCss):l&&(c=t.iconNull,i=t.iconNullCss),''+c+""},render:function(){var e=this,n=e.options,t=e.getIndicator(n.allowThreeValOnInit),c=e.disabled||!n.tabindex?"":' tabindex="'+n.tabindex+'"',a=n.size,o="cbx cbx-"+a+(e.disabled?" cbx-disabled":" cbx-active");return'
"+t+"
"}},e.fn.checkboxX=function(n){var c=Array.apply(null,arguments),a=[];switch(c.shift(),this.each(function(){var o=e(this),i=o.data("checkboxX"),l="object"==typeof n&&n;i||(i=new t(this,e.extend(!0,{},e.fn.checkboxX.defaults,l,o.data())),o.data("checkboxX",i)),"string"==typeof n&&a.push(i[n].apply(i,c))}),a.length){case 0:return this;case 1:return a[0];default:return a}},e.fn.checkboxX.defaults={theme:"",threeState:!0,inline:!0,iconChecked:null,iconUnchecked:"",iconNull:n.INDETERMINATE,iconCheckedCss:"",iconUncheckedCss:"",iconNullCss:"",useCrossIcon:!1,valueChecked:"1",valueUnchecked:"0",valueNull:"",size:"md",enclosedLabel:!1,useNative:!1,allowThreeValOnInit:!1,tabindex:"1000"},e.fn.checkboxX.Constructor=t,e('input[data-toggle="checkbox-x"]').addClass("cbx-loading"),e(document).ready(function(){e('input[data-toggle="checkbox-x"]').checkboxX()})}); -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "bootstrap-checkbox-x", 3 | "version": "1.5.7", 4 | "homepage": "https://github.com/kartik-v/bootstrap-checkbox-x", 5 | "author": "Kartik Visweswaran ", 6 | "description": "An extended checkbox plugin for bootstrap with three states and additional styles.", 7 | "bugs": { 8 | "url": "https://github.com/kartik-v/bootstrap-checkbox-x/issues" 9 | }, 10 | "style": "./css/checkbox-x.min.css", 11 | "main": "./js/checkbox-x.min.js", 12 | "keywords": [ 13 | "bootstrap", 14 | "checkbox", 15 | "jquery", 16 | "three", 17 | "state", 18 | "indeterminate", 19 | "null" 20 | ], 21 | "repository": { 22 | "type": "git", 23 | "url": "https://github.com/kartik-v/bootstrap-checkbox-x.git" 24 | }, 25 | "dependencies": { 26 | "jquery": ">= 1.9.0", 27 | "bootstrap": ">= 3.0.0" 28 | }, 29 | "license": "BSD-3-Clause" 30 | } 31 | -------------------------------------------------------------------------------- /sass/checkbox-x.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * An extended checkbox plugin for Bootstrap 3 that allows three states and additional styles. 6 | * 7 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 8 | * For more Yii related demos visit http://demos.krajee.com 9 | */ 10 | .cbx-loading { 11 | width: 25px; 12 | height: 25px; 13 | font-size: 0; 14 | color: #fff; 15 | background: transparent url('../img/loading.gif') top left no-repeat; 16 | border: none; 17 | } 18 | .cbx { 19 | display: inline-block; 20 | cursor: pointer; 21 | text-align: center; 22 | vertical-align: middle; 23 | text-align: center; 24 | vertical-align: middle; 25 | border-radius: 3px; 26 | position: relative; 27 | -webkit-user-select: none; 28 | -moz-user-select: none; 29 | -ms-user-select: none; 30 | user-select: none; 31 | } 32 | .cbx-container { 33 | display: inline-block; 34 | cursor: pointer; 35 | text-align: center; 36 | vertical-align: middle; 37 | -webkit-user-select: none; 38 | -moz-user-select: none; 39 | -ms-user-select: none; 40 | user-select: none; 41 | + { 42 | label { 43 | margin-left: 5px; 44 | } 45 | .cbx-container { 46 | margin-left: 5px; 47 | } 48 | } 49 | } 50 | .cbx-label { 51 | -webkit-user-select: none; 52 | -moz-user-select: none; 53 | -ms-user-select: none; 54 | user-select: none; 55 | cursor: pointer; 56 | font-weight: 400; 57 | margin: 0; 58 | } 59 | .cbx-label.disabled { 60 | cursor: not-allowed; 61 | opacity: .65; 62 | } 63 | label { 64 | + { 65 | .cbx-container { 66 | margin-left: 5px; 67 | } 68 | .cbx-block { 69 | margin-left: 0; 70 | margin-right: 0; 71 | } 72 | } 73 | .cbx { 74 | margin: 0 5px; 75 | } 76 | .cbx-block { 77 | margin-left: 0; 78 | margin-right: 0; 79 | } 80 | } 81 | .cbx-block { 82 | + { 83 | label { 84 | margin-left: 0; 85 | margin-right: 0; 86 | } 87 | .cbx-block { 88 | margin-left: 0; 89 | margin-right: 0; 90 | margin: 5px 0 0 0; 91 | } 92 | } 93 | display: block; 94 | text-align: left; 95 | } 96 | .cbx-xs { 97 | width: 16px; 98 | height: 16px; 99 | font-size: 10px; 100 | } 101 | .cbx-sm { 102 | width: 20px; 103 | height: 20px; 104 | font-size: 13px; 105 | } 106 | .cbx-md { 107 | width: 24px; 108 | height: 24px; 109 | font-size: 15px; 110 | } 111 | .cbx-lg { 112 | border-radius: 4px; 113 | width: 30px; 114 | height: 30px; 115 | font-size: 20px; 116 | } 117 | .cbx-xl { 118 | border-radius: 5px; 119 | width: 36px; 120 | height: 36px; 121 | font-size: 24px; 122 | } 123 | .cbx-icon { 124 | position: absolute; 125 | margin: 1px; 126 | top: 0; 127 | left: 0; 128 | bottom: 0; 129 | right: 0; 130 | } 131 | .cbx-icon-krajee { 132 | position: absolute; 133 | top: 15%; 134 | bottom: 15%; 135 | left: 15%; 136 | right: 15%; 137 | } 138 | .cbx-active { 139 | border: 1px solid #ccc; 140 | box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 141 | -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075); 142 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 143 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 144 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 145 | color: #333; 146 | &:hover { 147 | border-color: #86b7fe; 148 | outline: 0; 149 | box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); 150 | } 151 | &:focus { 152 | border-color: #86b7fe; 153 | outline: 0; 154 | box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%); 155 | } 156 | } 157 | .cbx-disabled { 158 | color: #ddd; 159 | background: #fcfcfc; 160 | border: 1px solid #ddd; 161 | cursor: not-allowed; 162 | } 163 | .has-success { 164 | .cbx-active { 165 | border-color: #198754; 166 | color: #198754; 167 | &:hover { 168 | border-color: #198754; 169 | box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%); 170 | } 171 | &:focus { 172 | border-color: #198754; 173 | box-shadow: 0 0 0 0.25rem rgb(25 135 84 / 25%); 174 | } 175 | } 176 | .cbx-label { 177 | color: #198754; 178 | } 179 | } 180 | .has-warning { 181 | .cbx-active { 182 | border-color: #ffc107; 183 | color: #ffc107; 184 | &:hover { 185 | border-color: #ffc107; 186 | box-shadow: 0 0 0 0.25rem rgb(255 193 7 / 25%); 187 | } 188 | &:focus { 189 | border-color: #ffc107; 190 | box-shadow: 0 0 0 0.25rem rgb(255 193 7 / 25%); 191 | } 192 | } 193 | .cbx-label { 194 | color: #ffc107; 195 | } 196 | } 197 | .has-error { 198 | .cbx-active { 199 | border-color: #dc3545; 200 | color: #dc3545; 201 | &:hover { 202 | border-color: #dc3545; 203 | box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%); 204 | } 205 | &:focus { 206 | border-color: #dc3545; 207 | box-shadow: 0 0 0 0.25rem rgb(220 53 69 / 25%); 208 | } 209 | } 210 | .cbx-label { 211 | color: #dc3545; 212 | } 213 | } 214 | .cbx-krajee { 215 | display: inline-flex; 216 | align-items: center; 217 | input[type=checkbox] { 218 | margin: 3px 3px 0; 219 | } 220 | } 221 | .cbx-enclosed { 222 | display: inline-flex; 223 | align-items: center; 224 | } 225 | -------------------------------------------------------------------------------- /sass/theme-krajee-flatblue.scss: -------------------------------------------------------------------------------- 1 | /*! 2 | * @copyright © Kartik Visweswaran, Krajee.com, 2014 - 2021 3 | * @version 1.5.7 4 | * 5 | * Krajee Flat Blue Theme for bootstrap-checkbox-x. Load this theme file after 6 | * `checkbox-x.css` on your page. 7 | * 8 | * For more JQuery/Bootstrap plugins and demos visit http://plugins.krajee.com 9 | * For more Yii related demos visit http://demos.krajee.com 10 | */ 11 | .cbx-krajee-flatblue { 12 | .cbx { 13 | border-radius: 0; 14 | } 15 | .cbx-xs .cbx-icon-null { 16 | padding: 4px; 17 | margin: 2px; 18 | } 19 | .cbx-sm .cbx-icon-null { 20 | padding: 5px; 21 | margin: 3px; 22 | } 23 | .cbx-md .cbx-icon-null { 24 | padding: 6px; 25 | margin: 4px; 26 | } 27 | .cbx-lg .cbx-icon-null { 28 | padding: 8px; 29 | margin: 5px; 30 | } 31 | .cbx-xl .cbx-icon-null { 32 | padding: 10px; 33 | margin: 6px; 34 | } 35 | .cbx-disabled .cbx-icon-null { 36 | background-color: #aaa; 37 | } 38 | .cbx-active { 39 | .cbx-icon-null { 40 | background-color: #3c8dbc; 41 | } 42 | color: #3c8dbc; 43 | box-shadow: none; 44 | -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s; 45 | -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 46 | transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s; 47 | &:hover { 48 | border-color: #0073b7; 49 | outline: 0; 50 | box-shadow: none; 51 | } 52 | &:focus { 53 | border-color: #0073b7; 54 | outline: 0; 55 | box-shadow: none; 56 | color: #0073b7; 57 | } 58 | } 59 | .cbx-disabled { 60 | color: #ddd; 61 | background: #fcfcfc; 62 | border: 1px solid #ddd; 63 | cursor: not-allowed; 64 | } 65 | } 66 | 67 | .has-success .cbx-krajee-flatblue .cbx-active { 68 | border-color: #00a65a; 69 | color: #00a65a; 70 | box-shadow: none; 71 | &:hover, &:focus { 72 | border-color: #00a65a; 73 | box-shadow: none; 74 | } 75 | } 76 | 77 | .has-warning .cbx-krajee-flatblue .cbx-active { 78 | border-color: #f39c12; 79 | color: #f39c12; 80 | box-shadow: none; 81 | &:hover, &:focus { 82 | border-color: #f39c12; 83 | box-shadow: none; 84 | } 85 | } 86 | 87 | .has-error .cbx-krajee-flatblue { 88 | .cbx-active { 89 | border-color: #dd4b39; 90 | color: #dd4b39; 91 | box-shadow: none; 92 | &:hover, &:focus { 93 | border-color: #dd4b39; 94 | box-shadow: none; 95 | } 96 | } 97 | .cbx-icon-null { 98 | background-color: #dd4b39; 99 | } 100 | } 101 | 102 | .has-success .cbx-krajee-flatblue .cbx-icon-null { 103 | background-color: #00a65a; 104 | } 105 | 106 | .has-warning .cbx-krajee-flatblue .cbx-icon-null { 107 | background-color: #f39c12; 108 | } 109 | 110 | .has-error .cbx-krajee-flatblue .cbx-label { 111 | color: #dd4b39; 112 | } 113 | 114 | .has-success .cbx-krajee-flatblue .cbx-label { 115 | color: #00a65a; 116 | } 117 | 118 | .has-warning .cbx-krajee-flatblue .cbx-label { 119 | color: #f39c12; 120 | } --------------------------------------------------------------------------------