vsn4ik / bootstrap-checkbox Goto Github PK

View Code? Open in Web Editor NEW

214.0 214.0 61.0 1002 KB

A checkbox component based on Bootstrap framework.

Home Page: https://vsn4ik.github.io/bootstrap-checkbox/

License: MIT License

JavaScript 100.00%

bootstrap bootstrap-checkbox javascript jquery jquery-plugin

bootstrap-checkbox's Introduction

bootstrap-checkbox's People

Contributors

Stargazers

Watchers

Forkers

fmmsilva remon jacknm jakeoftrades srdc2014 bitcod3r cfconsultancy carabina adamli xianxingg pixelia-es marquisknox pimello liuwei3230 rafmix iamjakob tache hoodasaad umarmughal supermfc projesh goupviet marc-gist naxbcr load88168 liguifa liyunde rajcsanyiz marcianobarros20 raphalimadev eloar vic4key mayconcruz mirovinger libean securecloud-biz proxysk8 ucotta thinklib ontpnet escapeboy choudharidl ductai110196 kakhavk mlfusion powerticmkt reallinfo merure unmikim00 mahesh5037 hervera zangloo chinamds codecopy elvinz tirtasouja adaxmp nopphasinara misatotremor promas52

bootstrap-checkbox's Issues

Version v1.2.0 broke "change" event.

Version v1.2.0 seams like it broke the change event.

Now this is not firing when clicking bootstrap-checkbox (it works with 1.1.9)...

$("#MyCheckBox").change(function (e) { alert("changed"); });

Changing checked state via javascript doesn't update the label

When changing the state of the checkbox using jquery script, the checkbox doesn't switch visually.

Look at this code
<input id="chk" type="checkbox") />
$('#chk').checkboxpicker();
$('#chk').prop('checked', false).trigger('change');

You will see the checkbox does not switch/toggle.
Any idea how to fix it?

Cheers,
Bit5

Check box initialization Issue in IE

Initializing the bootstrap-checkboxes after loading jquery, bootstrap as shown below.
$(':checkbox').checkboxpicker();
Working Fine in Chrome.
Only in IE Shows Error "Object doesn't support property or method 'checkboxpicker'". Which is an intermittent Issue. Please help me how to fix.
Quick Fix required for the above Issue

Bootstrap 4 compitibility

Is there any time frame to make the project compitible with latest bootstrap 4 .

Can't get this to work

I'm sure I'm missing something obvious but I cannot get this to work, all checkboxes show up as checkboxes not switches.

I downloaded the latest version and put the dist folder into my project folder. Then copied the basic html from the examples and added one simple checkbox:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap-theme.min.css">

  <script src="https://code.jquery.com/jquery-2.2.3.min.js" defer></script>
  <script src="dist/js/bootstrap-checkbox.min.js" defer></script>
</head>
<body>
  <div class="form-horizontal">
    <div class="form-group">
        <div class="col-sm-3">
            <input type="checkbox">
        </div>
    </div>
    </div>
</body>
</html>

Any help much appreciated, I'd really like to use this!

Pete

Checked and Unchecked is wrong...

When using this checkbox, the checked and unchecked is reversed.

Look at this code
<input id="chk" type="checkbox" checked) />

You will see that the "NO" has been selected. And when you use in the js it is totally wrong! The No will be "TRUE" and Yes will become "FALSE".
$('#chk').checkboxpicker();
$('#chk').change(function () { alert ($(this).is(":checked")); });
$('#chk').prop('checked', false).trigger('change');

Any idea how to fix it?

Cheers

Duplicated controls when dynamic active the checkboxes

I'm trying to use this script in dynamic created checkboxes.
If I only activate the checkboxes width the call $(':checkbox').checkboxpicker(); the checkboxes don't work. I need to call the function every time I insert a new checkbox. This fix the problem, but now the checkboxes that already exist are duplicated.

Did this to solve the problem.


    var Checkboxpicker = function(element, options) {
        this.element = element;
            /** My fix **/
    if (!$(element).is(':visible')){return;}
    /** end **/
    this.$element = $(element).hide();

    this.options = $.extend({}, $.fn.checkboxpicker.defaults, options, this.$element.data());

    // .btn-group-justified works with <label> elements as the <button> doesn't pick up the styles
    this.$buttons = $('<label></label><label></label>').addClass('btn').click(this.clicked.bind(this));

    this.$off = this.$buttons.eq(0).html(this.options.offLabel);
    this.$on = this.$buttons.eq(1).html(this.options.onLabel);

    this.$group = $('<div class="btn-group"></div>')
        .append(this.$buttons)
        .keydown(this.keydown.bind(this))
        .insertAfter(element);

    this.init();
};

With Bootstrap: Please do not use Bootstrap-checkbox element in label element.

Bootstrap puts, in the examples, the input inside the label. Then this error pops up.

<label class="required"><input id="register_financier_practice_association_financier_practice_enabled" name="register_financier_practice_association[financier_practice_enabled]" required="required" value="1" type="checkbox"> Habilitada</label>

I will have to remove it via JavaScript and create separately, because I'm using Symfony Forms component and I found no way to stop it creating Input inside label. Even with label => false, it creates an empty label element.

disabled still toggable

It looks like a checkbox, converted to a 'checkboxpicker' can still be changed even though it has been set to readonly. The state of the button changes to dimmed (e.g. disabled) but i can still click on it and it updates the state of the checkbox.

Changing this:

click: function(event) {
  // Strictly event.currentTarget. Fix #19
  var $button = $(event.currentTarget);

  if (!$button.hasClass('active') || this.options.switchAlways) {
    this.change();
  }
}

To this fixed the issue:

click: function(event) {
  // Strictly event.currentTarget. Fix #19
  var $button = $(event.currentTarget);

  if ($button.hasClass('disabled')) {
    return;
  }

  if (!$button.hasClass('active') || this.options.switchAlways) {
    this.change();
  }
},

New logo for bootstrap-checkbox

I wanted to contribute to bootstrap-checkbox. I designed a logo for it. If you like it, I'll send you files and pr.
is there anything you want?

Switch text and $_POST values

Couple of questions.

Is it possible to have neither No nor Yes highlighted on initial display?

Is it possible to set a $_POST value for the off state?

Also, the data-off-icon-cls and data-on-icon-cls don't have any effect. Tried it with the example on the web page for thumbs up and thumbs down.

Thanks,
Pete

get value after click

hi.
i want get a value after click a checkbox. for example after click a left checkbox return 0 and right return 1
please help me.

Readonly Attribute

The Checkbox Plug isnt respecting the ReadOnly attribute.

I need to use ReadOnly so that the control still postback to the server, because disabled fiedls dont post

[Feature Request] Option to swap choices order

It would be nice to have some sort of a boolean option to display checkbox choices reversed like Yes | No in place of No | Yes, giving "priority" to the positive choice instead. 👍

Checkboxes still visible in IE

In IE 9/10, the checkboxes are still visible above or beside the buttons.

Vertical checkbox top-right corner is not rounded

The top right conrner is not rounded because both btn-group and btn-group-vertical class are applied:

<div is="0" class="btn-group btn-group-vertical m-b" tabindex="0">
 <a is="0" class="btn active btn-danger">No</a>
 <a is="1" class="btn btn-default">Yes</a>
</div>

It displays just fine if I remove the btn-group class from the div:

<div is="0" class="btn-group-vertical m-b" tabindex="0">
 <a is="0" class="btn active btn-danger">No</a>
 <a is="1" class="btn btn-default">Yes</a>
</div>

Using class instead ID

Hi, can i use class="le-checkbox" instead id="le-checkbox" on DOM?

Great work!

onclick Event?

Is it possible to have an onclick event with these? I want it to run a javascript function when I click on the buttons.

This plugin conflicts with Bootstrap Multiselect

Hello! I love using this great tool. I also use Bootstrap Multiselect. However, when both are initialized on the same page, this plugin throws a warning: "Please do not use Bootstrap-checkbox element in label element." and breaks quite a bit of functionality of the Bootstrap Multiselect. This could be worth investigating and I will let you know what I find.

Issue with ASP.NET MVC

I am trying to use this plugin in one of my asp.net view, it shows the Yes/No button perfectly in place of Checkbox.

But when I click the Yes/No button, it throw "undefined" error. Please help.

Logo offer

Hi sir. I'm graphic designer. I have studied your work and I think a new design will make you more visible. I would like to offer you logo. I can give you all the formats of the design free. If you want a change please specify.

Add support for Bootstraps button sizes.

Let the end user control what the size of the button should be.

Eg. I changed it to small...
this.$buttons = $('').addClass('btn btn-xs');

This should be set in options.

Enter key should submit form, not toggle

The default behavior for checkboxes is to have the space key toggle the checkbox, and the enter key to submit the form. I noticed that both the space and enter keys toggle the checkbox, which is not consistent with browser behavior.

Any thoughts on this and whether this behavior should be fixed?

Install via npm fails with unmetgrunt dependency

Attempting to install bootstrap-checkbox via npm fails with:

/home/dvatp
├── [email protected]
└── UNMET PEER DEPENDENCY grunt@~0.4.5
npm WARN [email protected] requires a peer of grunt@~0.4.5 but none was installed.

So it's looking for grunt 0.4.5 but that is apparently no longer available in the repository so the dependency can't be satisfied.

This is odd because I checked the source for 1.4.0 and package.json indicates a dependency on a 1.x variant of grunt. Was the package built incorrectly?

Documentation incorrect data-off-title should be data-off-label

<input type="checkbox" data-off-title="No" data-on-title="Yes">

Also be nice if there was a way of controling the size via data attribute. At the moment I have to do this:

$this.checkboxpicker({
  defaultClass: 'btn-default btn-sm',
  offClass: 'btn-danger btn-sm',
  onClass: 'btn-info btn-sm'
});

The "input" control should be updated with correct values

When checking and unchecking the checkbox, the "input" should be updated with the value.

Feature Request: Disable addon for specific checkboxes

I would like a feature to disable this addon for specific checkboxes. Something like data-check-disable="true" within the input element would do nicely.

Updating checkbox does not update buttons

If I do this in code...

$('#MyCheckBox').attr("checked", "checked");

... the buttons still says "Off".

How can I update the bootstrap-checkbox to reflect the "input checkbox"?

Thanks

Use event.currentTarget instead event.target on *.prototype.click method

event.target == <span> if the cursor is positioned over <span> (MouseEvent).

Checkbox won't render when using AJAX

I've ran into an interesting problem. I have found that when rendering the page with AJAX (which is used everywhere today), checkboxes within the newly rendered content still show as a checkbox and not a switch. Rendering can be done by either DOM object manipulation or by direct HTML injection into a DIV tag. I have found that using this code

<!-- Checkbox Boot Script -->
<script type="text/javascript">
	function featureCheckbox() {
		$(':checkbox').checkboxpicker();
	}
</script>

at the bottom of the HTML template page, and then calling the function featureCheckbox() as the last action in the AJAX response handler, I was able to get it to work. The documentation should be updated to indicate this little caveat.

This is within the AJAX response handler.

// Feature Activations
if (typeof ajaxResponseHandler == typeof featureCheckbox)
{
	featureCheckbox();
}

Another thing that I noticed is that all checkboxes must be rendered and on screen before calling the activation routine. Any checkboxes that are rendered after the activation routine will not get the new visual and will remain as an ordinary checkbox. The documentation should be updated to reflect this.

Anyways, this is a nice addon. Good Job!