CODEWITHSUNDEEP
jquery-ui
Phillip Senn
Phillip Senn

Reputation: 47605

jQuery UI Checkbox not showing

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.

Upvotes: 1

Views: 2644

Answers (2)

Scruffy The Janitor
Scruffy The Janitor

Reputation: 472

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.

Upvotes: 2

Fr&#233;d&#233;ric Hamidi
Fr&#233;d&#233;ric Hamidi

Reputation: 262939

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>

Upvotes: 1

Related Questions