Bug with clicking on checkbox div does not toggle it

[batata004]

The test case is here -> https://jsfiddle.net/f2b6u8pk/

To trigger the bug just click on "Pessoa Jurídica" and for some strange reason, the checkbox does not "checks" itself. At the documentation page https://fomantic-ui.com/modules/checkbox.html when I click on the text at the side of the checkbox, makes it toggle the state of the checkbox.

Fixing trhis bug would improve a lot usability mainly on mobile devices where the checkbox itself gets too much small and it helps having the text clickable.

Maybe the bug relies in the fact that the checkbox is inside a modal?

[ko2in]

@batata004 , You're using simple CSS checkbox, which doesn't toggle by clicking the label or the container div. You need to invoke JS to have such function:

$('.ui.checkbox').checkbox()

Here's the fiddle https://jsfiddle.net/g6apz07o/.

Here's the documentation without Javascript (https://fomantic-ui.com/modules/checkbox.html#/usage) which have the same as yours.

[lubber-de]

It's also possible without using javascript.

• Use a for attribute for the label pointing to the id of the input element
• add the class hidden to the input field (this adds the pointer cursor, clicking on the label will also work without that)

<div class="ui checkbox">
  <input id="cb1" type="radio" value="Pessoa Física" name="pessoa" checked="checked" class="hidden" />
  <label for="cb1">Pessoa Física</label>
</div>
<div class="ui checkbox">
  <input id="cb2" type="radio" value="Pessoa a Jurídica" name="pessoa" checked="checked" class="hidden" />
  <label for="cb2">Pessoa a Jurídica</label>
</div>

See https://jsfiddle.net/lubber/ysvgz0rt/1/

[batata004]

The for alternative pointed by @lubber-de is easier in my case, I finally found it under USAGE tab of the CHECKBOX component. Also, the @ko2in method worked perfectly, both solution solved the not bug that I wrongly said here.