Cancel triggering of click event on checkbox selection

- 1 answer

Ad

I have this piece of HTML:

<tr class="acord">
 <td colspan="4"><input class="marcatodos" type="checkbox" value="1"/>Clientes</td>
</tr>
<tr>
   <td>
      <label>
      <input name="vCliente" class="marcar" type="checkbox" checked="checked" value="1" />
      <span class="lbl"> Visualizar Cliente</span>
      </label>
   </td>
   <td>
      <label>
      <input name="aCliente" class="marcar" type="checkbox" value="1" />
      <span class="lbl"> Adicionar Cliente</span>
      </label>
   </td>
   <td>
      <label>
      <input name="eCliente" class="marcar" type="checkbox" value="1" />
      <span class="lbl"> Editar Cliente</span>
      </label>
   </td>
   <td>
      <label>
      <input name="dCliente" class="marcar" type="checkbox" value="1" />
      <span class="lbl"> Excluir Cliente</span>
      </label>
   </td>
</tr>

and this jQuery script:

$(".acord").click(function() {
   $(this).next("tr").slideToggle(1);
});

That's what the HTML generates:

enter image description here

The jQuery hides the row below the one with a title (class accord)

My problem is that when I click on the checkbox, the jQuery triggers it anyway.

How can I make it so the function only runs when I click outside the checkbox?

Ad

Answer

Ad

Basically you need to stop the event from bubbling up to the tr element

$('.marcatodos').click(function(e){
  e.stopPropagation();
});

Here is a fiddle to show the same.

Ad
source: stackoverflow.com
Ad