Cancel triggering of click event on checkbox selection
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:
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
Related Questions
Ad
- → How to update data attribute on Ajax complete
- → October CMS - Radio Button Ajax Click Twice in a Row Causes Content to disappear
- → Octobercms Component Unique id (Twig & Javascript)
- → Passing a JS var from AJAX response to Twig
- → Laravel {!! Form::open() !!} doesn't work within AngularJS
- → DropzoneJS & Laravel - Output form validation errors
- → Import statement and Babel
- → Uncaught TypeError: Cannot read property '__SECRET_DOM_DO_NOT_USE_OR_YOU_WILL_BE_FIRED' of undefined
- → React-router: Passing props to children
- → ListView.DataSource looping data for React Native
- → Can't test submit handler in React component
- → React + Flux - How to avoid global variable
- → Webpack, React & Babel, not rendering DOM
Ad