jQuery UI Checkbox not showing

Question

I have:

<input name="ShowDeleted" type="checkbox" />
<label for="ShowDeleted">Show Deleted</label>

and in my JavaScript, I have:

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

The way that I call that I call jQuery is:

<script src="http://www.google.com/jsapi"></script>
<script src="myGoodness.js"></script>

And then the Javascript is:

google.load("jquery", "1");
google.load("jqueryui", "1");
var myLoadCallback = function() {
    $('input[type=checkbox]').button();
};
google.setOnLoadCallback(myLoadCallback);

Q: Why am I not seeing a jQuery UI styled checkbox? Is it because myLoadCallback is being called after jQuery loads but before jQuery UI loads?

In Firebug, I see that the input has class ui-helper-hidden-accessible added to it.

Scruffy The Janitor · Accepted Answer · 2011-12-06 16:13:00Z

2

I was able to get it work like this.

See Fiddle here

The for element on your label should be referencing an ID.

I changed your input to include id="check" and changed your label from for="ShowDeleted" to for="check".

<input name="ShowDeleted" type="checkbox" />
<label for="ShowDeleted">Show Deleted</label>

to

<input id="check" name="ShowDeleted" type="checkbox" />
<label for="check">Show Deleted</label>

And then I just called the following Javascript to create the jquery checkbox button.

$('#check').button();

If these changes do not work for you, id suggest making sure that you are pulling in the jquery and jquery-ui js and css files properly.

edited Dec 6, 2011 at 16:13

answered Dec 6, 2011 at 15:59

Scruffy The Janitor

4723 gold badges5 silver badges13 bronze badges

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

Comments

Frédéric Hamidi · Accepted Answer · 2011-12-06 16:11:55Z

1

That's because the for attribute of your <label> element must refer to the id attribute of the check box, not to its name.

Adding an id attribute to the check box fixes your problem:

<input id="ShowDeleted" name="ShowDeleted" type="checkbox" />
<label for="ShowDeleted">Show Deleted</label>

answered Dec 6, 2011 at 16:11

Frédéric Hamidi

264k42 gold badges497 silver badges486 bronze badges

Collectives™ on Stack Overflow

jQuery UI Checkbox not showing

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related