Semantic-ui, action-free checkbox in the form

Question

I created a form using Semantic-Ui, but I can not enable the checkbox, I need some specific javascript for these elements?

<table class="ui table">
<thead>
    <tr>
        <th class="four wide column">Acesso</th>
        <th class="twoelve wide column">Permissão</th>
    </tr>
</thead>
<tbody>
    <tr>
        <td><div class="ui segment"><div class="field"><div class="ui toggle checkbox">
            <input name="access_user" tabindex="0" class="hidden" type="checkbox"><label>Usuários</label></div></div></div>        
        </td>
        <td><div class="ui segment"><div class="inline field"><div class="ui radio checkbox">
            <input type="radio" name="perm_user"><label for="perm_user">Só leitura</label>
            <input type="radio" name="perm_user"><label for="perm_user">Leitura & Gravação</label>
            <input type="radio" name="perm_user"><label for="perm_user">Controle Total</label></div></div></div>    
        </td>
    </tr>
    <tr>
        <td><div class="ui segment"><div class="field"><div class="ui checkbox">
        <input name="access_user" tabindex="0" class="hidden" type="checkbox"><label>Cupom</label></div></div></div>        
    </td>
        <td><div class="ui segment"><div class="inline fields"><div class="field"><div class="ui radio checkbox">
            <input type="radio" name="perm_cupom"><label for="perm_cupom">Só leitura</label>
            <input type="radio" name="perm_cupom"><label for="perm_cupom">Leitura & Gravação</label>
            <input type="radio" name="perm_cupom"><label for="perm_cupom">Controle Total</label></div></div></div></div>    
        </td>
    </tr>
</tbody>
<tfoot>
    <tr>
        <th>3 People</th>
        <th>2 Approved</th>
    </tr>
</tfoot>

Answer 1

Your HTML is not structured according to library specifications. You cannot place multiple elements radio within a single div.ui.radio.checkbox. This div should contain only one form field. See an example:

<link href="https://semantic-ui.com/dist/semantic.min.css" rel="stylesheet" />
<div class="ui piled segment">
  <h4 class="ui header">Permissão</h4>
  <div class="ui radio checkbox">
    <input type="radio" name="perm_user" id="perm_user_read_only">
    <label for="perm_user_read_only">Só leitura</label>
  </div>
  <div class="ui radio checkbox">
    <input type="radio" name="perm_user" id="perm_user_read_write">
    <label for="perm_user_read_write">Leitura e Escrita</label>
  </div>
  <div class="ui radio checkbox">
    <input type="radio" name="perm_user" id="perm_user_all">
    <label for="perm_user_all">Controle Total</label>
  </div>
</div>

Some elements of your form even have the class .hidden that seems to interfere with the functioning of the same. If the behavior is not as expected, it may be interesting to review this class.