jQuery UI checkbox button showing normal checkbox

Question

HTML:

<input id="1" type="checkbox" checked="checked" />
<label for="1">Online</label>

jQuery:

$(function () {
    $('input[type=checkbox]').button();
});

When rendered in the browser it is showing both a traditional checkbox and a button underneath. I can click on either one and they will toggle the checkbox. This is the HTML in the browser:

<input id="1" type="checkbox" checked="checked" class="ui-helper-hidden-accessible">
<label for="1" class="ui-state-active ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Online</span></label>

When I enter the same into jsfiddle it works perfectly, get just the toggle button. So I'm at a loss what is causing this?

Not quite sure if this is it, but maybe you want $('input[type="checkbox"]') instead? — Sterling Archer
– Sterling Archer, Commented Mar 22, 2013 at 5:23

Ares · Accepted Answer · 2013-03-22 05:29:11Z

2

Your jQuery selector is wrong. You need to add " to the type, like this:

$('input[type="checkbox"]').button();

answered Mar 22, 2013 at 5:29

Ares

5,9033 gold badges37 silver badges51 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user380689 Over a year ago

Tried that but it doesn't make a difference. Also, it looks to me like the button part is working since the elements have all those ui-* class attributes.

Ares Over a year ago

Did you add the jquery-ui.css and made sure the images are being referenced correctly?

Collectives™ on Stack Overflow

jQuery UI checkbox button showing normal checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related