Semantic-ui: Checkbox cannot be checked

[elgs]

It seems when an http://jsfiddle.net/elgs/R2wux/

[jlukic]

You are missing javascript or id tag match
http://semantic-ui.com/modules/checkbox.html#/usage

http://jsfiddle.net/kUwGz/

[brigand]

@elgs I recommend doing it without JavaScript, because it's easier for screen readers to understand, and follows the html spec.

http://jsfiddle.net/dg52y/

[geomorillo]

please fix the docs on http://semantic-ui.com/modules/checkbox.html#/definition
this doesn't work with current version

<div class="ui checkbox">
    <input name="fun" type="checkbox">
    <label>Make my profile visible</label>
  </div>

this should be:

<div class="ui checkbox">
    <input id="fun" type="checkbox">
    <label for="fun">Make my profile visible</label>
  </div>

[AlexanderSk]

Hello, the usage page still shows the wrong code regarding the check box without the fix.
http://semantic-ui.com/modules/checkbox.html#/usage

I agree to the Terms of Service.

The correct usage is described here: http://semantic-ui.com/modules/checkbox.html#/usage
with the id and the for attr in the label.

[ryoia]

@brigand , will leaving off the initialization process (.checkbox()) mess anything up? such as changes not being detect?

[TeemuKoivisto]

I do not know if this is how it's supposed to work but if you put label _before_ the input the checkbox can't be checked.

This doesn't work:

<div class="ui checkbox">
  <label></label>
  <input type="checkbox">
</div>

This works:

<div class="ui checkbox">
  <input type="checkbox">
  <label></label>
</div>

Makes it the more confusing as in vanilla CSS the checkbox works both ways. Very frustrating bug either way. Took me way too long to figure it out.

EDIT: Here is a demonstration jsfiddle

[sandervanmook]

I'm having this problem using Symfony 3 with Semantic-ui 2.2. I copied the bootstrap template that comes with Symfony and adjusted it to support Semantic. I keep having trouble getting the check / radio buttons to work as I can't select them. I did include the needed JS. If someone has a working template to support forms in Symfony 3 I would like to use it very much :)

[alanondra]

Using this in a Laravel project, importing via Laravel Mix after processing with Gulp. So far everything else works okay, except checkboxes, whether Javascript is used or not. For out-of-the-box behavior, this is frankly unacceptable.

[brigand]

This is a html thing, you need to associate the label with the checkbox if they're not nested.

<div class="ui checkbox">
  <label for="foo"></label>
  <input id="foo" type="checkbox">
</div>

[alanondra]

It's not an issue of improperly formatted HTML. I'm well aware of the relationship between labels and inputs. Even if I use the example code from the documentation, the checkbox does not change to the checked state. I attached event handlers on the checkbox, one for the click event, one for the changed event. The former fires correctly but the latter does not. Something in Semantic prevents checkboxes from changing state at all.

[jlukic]

There's no way we can support labels before inputs without javascript.

CSS provides an adjacent sibling selector which lets us add the "checked" x style to the label conditionally

input:checked + label {
 // format next label after an input differently
}

but does not provide a "previous sibling selector".

This is an obvious and unfortunate limitation of the css specification.

[alanondra]

In my case the label follows the checkbox, but the checkbox still refuses to change state, even if I manually alter the element to have the checked attribute. This isn't a problem if I'm not using Semantic UI.

[awgv]

Hi @alanondra, could you please fork this JSFiddle to create a test case?

[alanondra]

Forked. Literally copypasta of the example code in the form documentation. The checkbox cannot be checked under any circumstance.

Edit: It looks like the Material theme causes some issues with the checkbox.

[pbrooks04]

Hi @jlukic

I'm sorry to bother you, but from your response dated to Nov 6, 2013 (your first response in this thread) you wrote that the page was missing JavaScript. This was indeed the problem for my page and the solution fixed it no problem.

But I am a little troubled because the in the documentation you cited,

http://semantic-ui.com/modules/checkbox.html#/usage

one of the first things listed is: "A checkbox does not require Javascript to function". This seems like a contradiction to me. Do you mind shedding some light on the matter? Thank you.

PS Although this is my first post, I owe you many thanks for your ongoing help in responding to many other issues in other threads. Keep up the great work!

[awgv]

@alanondra Thank you. Remove .hidden from a checkbox’s input, and it should start working again. It sets a z-index: -1 for it, and I’m not sure why it exists, because it seems absolutely unnecessary. I’ll take a closer look at it this weekend to see if it’s something that should be removed, in any case, sorry for the inconvenience, we’ll fix the documentation.

[awgv]

Hi @pbrooks04, this thread is quite old, and I’m not sure what Jack meant back then, but the checkbox component has always worked with and without JavaScript initialization.

[graham-sportsmgmt]

@Banandrew I just got trapped by the "hidden" class as used in the very first example on the Forms page. Removed this class as you suggested and it all works fine now.

What was the purpose of including hidden in the first place?

[awgv]

@graham-sportsmgmt Hi, I still don’t know, and the maintainer never joined the discussion.

[elgs]

I believe @jlukic is the author of the whole thing.