CODEWITHSUNDEEP
jquery-uicheckbox
user380689
user380689

Reputation: 1794

jQuery UI checkbox button showing normal checkbox

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?

Upvotes: 1

Views: 3850

Answers (1)

Ares
Ares

Reputation: 5903

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

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

Upvotes: 2

Related Questions