Make row clickable except on checkbox

Question

I have written code so that if the table row is clicked it will act as a link and bring you to a new page, however I also want to have it so they can select rows to do things with. The problem is when they click on the checkbox to select it, it detect that the "row" was clicked and activates the link.

Here is the code I have written

<script>
$(document).ready(function() {$('table[name=$tableName]').DataTable();
            $('table[name=$tableName] tbody').on( 'click', 'tr', function () {
                $(location).attr('href', 'http://stackoverflow.com/');
            })

        });
</script>

I have checkboxes in the first column

The problem is anytime the checkbox is clicked I need it to not redirect the page. Basically if anywhere else is then it will.

Anyone know how I can modify to implement this functionality?

Looks like that is a label and not a checkbox that is clickable.... Correct? — epascarello
– epascarello, Commented Nov 19, 2019 at 15:21
It is a checkbox, it uses semantic UI to turn it into that, as seen here : semantic-ui.com/modules/checkbox.html#toggle — Lain
– Lain, Commented Nov 19, 2019 at 15:23

epascarello · Accepted Answer · 2019-11-19 15:25:52Z

5

So check what was clicked and if it it the label/checkbox then ignore it.

$("table tbody").on("click", "tr", function (e) {
  if ($(e.target).is("label,input")) {
    return
  } else {
    console.log("clicked")
  }
})

input[type="checkbox"] {
  display: none
}

input[type="checkbox"]:checked + label {
  background-color: green;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table>
  <tr>
    <td><input type="checkbox" id="cb1"><label for="cb1">CB</label></td>
    <td>HMMMM 1</td>
  </tr>
  <tr>
    <td><input type="checkbox" id="cb2"><label for="cb2">CB</label></td>
    <td>HMMMM 2</td>
  </tr>
<table>

answered Nov 19, 2019 at 15:25

epascarello

208k20 gold badges206 silver badges246 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Lain Over a year ago

Looks great, will accept. In my specific example I don't have a label. It is a regular input type checkbox thing wrapped in a <div class='ui toggle checkbox'>. Do you know how I would do it for this instead of labe,input? If not I will research as this has given me solid ground to work off of. Thanks!

epascarello Over a year ago

I bet it is a label. What does console.log(e.target) show when you click on it?

Collectives™ on Stack Overflow

Make row clickable except on checkbox

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related