Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

Question

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

We have a Table grid with multiple columns, one of which is a Select Box (CheckBox). The expected behavior is that when a row is clicked, the respective CheckBox should get checked, and clicking on the CheckBox itself should update it.

I tried implementing the following code -

$("#table_id").on("click", ".table-body-row", function(){
    $(':checkbox', this).trigger('click');                                  
});

It works for rows, but when I click on the respective CheckBox, it gets clicked twice: -First by the Mouse Click on the CheckBox itself -Second when the above function is called

Can anyone provide help? Is there another way to handle this scenario?

javascript jquery css

Answer 1

Answer №1

The problem arises when you click on the checkbox, causing a change in the checked state. This change then propagates up the DOM and is captured by the event handler on the row, which resets the checked state back to its original value, making it seem like nothing has changed.

To resolve this issue, you need to ensure that the event target was indeed the checkbox, and if so, keep the checked property unchanged:

$("#table_id").on("click", ".table-body-row", function(e) {
  if (!$(e.target).is(':checkbox'))
    $(':checkbox', this).prop('checked', (i, checked) => !checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
  <tr class="table-body-row">
    <td>Lorem ipsum</td>
    <td>Foo bar</td>
    <td><input type="checkbox" />
  </tr>
</table>

It's important to use prop() directly instead of triggering an event on the element. Also, note that calling stopPropagation() on the checkbox itself will not work in this case since you are using a delegated event handler (which means the event has already bubbled up before being intercepted).

Answer 2

The problem arises when you click on the checkbox, causing a change in the checked state. This change then propagates up the DOM and is captured by the event handler on the row, which resets the checked state back to its original value, making it seem like nothing has changed.

To resolve this issue, you need to ensure that the event target was indeed the checkbox, and if so, keep the checked property unchanged:

$("#table_id").on("click", ".table-body-row", function(e) {
  if (!$(e.target).is(':checkbox'))
    $(':checkbox', this).prop('checked', (i, checked) => !checked);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table id="table_id">
  <tr class="table-body-row">
    <td>Lorem ipsum</td>
    <td>Foo bar</td>
    <td><input type="checkbox" />
  </tr>
</table>

It's important to use prop() directly instead of triggering an event on the element. Also, note that calling stopPropagation() on the checkbox itself will not work in this case since you are using a delegated event handler (which means the event has already bubbled up before being intercepted).

Answer 3

Answer №2

Avoid using a click event to alter the checkbox selection.

 $(':checkbox', this).prop('checked', true);
 $(':checkbox', this).prop('checked', false);

If there is an issue with event bubbling, you might have to prevent the event from propagating.

event.stopPropagation()

Answer 4

Avoid using a click event to alter the checkbox selection.

 $(':checkbox', this).prop('checked', true);
 $(':checkbox', this).prop('checked', false);

If there is an issue with event bubbling, you might have to prevent the event from propagating.

event.stopPropagation()

Preventing mouse clicks on checkboxes and triggering events using JavaScript - a complete guide

Answer №1

Answer №2

Similar questions

Identify any missing periods and combine the years into a single range

Troubleshooting: Google Tag Manager showing a blank page

Combining PHP with the power of Jquery for seamless integration

Animating object properties instead of static values

A tutorial on preventing backbone.js from automatically adding /# when a dialog is closed

Is there a way to continuously click on a button 99 times or until the code finishes running?

Utilize the power of JavaScript to recursively map object keys

Improving Page Load Speed with HTML Caching: Strategies for Enhancing Performance when over half of the data transferred is for navigation menus

Guide on sending files and data simultaneously from Angular to .NET Core

Is there a way to utilize a value from one column within a Datatables constructor for another column's operation?

Steps for creating a personalized query or route in feathersjs

Arrange the icons in multiple rows to ensure an equal distribution of icons on each row

Align the label vertically with the corresponding input field

The definition of require is missing in the MEAN stack node

In Angular, when a component is clicked, it is selecting entire arrays instead of just a single item at a

Having an excess of 32 individual byte values

NodeJS: Implementing external URL redirection functionality

Looping through a series of URLs in AngularJS and performing an $

What is the process for including a JavaScript file in an HTML document?

How can I make a row div taller?