Semantic-ui, checkbox with no action on form

Navigation
1

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

<tableclass="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>

    
asked by anonymous 09.09.2017 / 13:17

1 answer

1

Your HTML is not structured according to library specifications. You can not put multiple elements radio within a same div.ui.radio.checkbox . This div must contain only one field of the form. Here's 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 its operation. If the behavior is not as expected, it may be interesting to review this class.

    
09.09.2017 / 14:53
JavaScript function return Pass an object to Modal