Jquery - check if checkbox was clicked

Question

I have a jquery function, that activates only when a table row is clicked and if so, it invokes controller method. However, this row also contains checkbox, and if i click it i don't want this method to be called. I tried checking the clicked element type or other parameters like class, but it seems to only apply to the entire row. Any ideas how to make it work?

JQuery:

function AllowTableRowsToBeClicked() {
    $('#pref-table tbody tr').click(function () {
        var resourceName = $(this).attr('title');
        var categoryName = $('#pref-table').attr('name');
        var url = "/Home/GetSpecific";
        $.post(url, { categoryName: categoryName, resourceName: myClass }, function (data) {

    });
});

}

cshtml:

<table class="table table-striped table-hover margin-top-20 pref-table" id="pref-table" [email protected]>
    @for (int i = 0; i < Model.BiData.Count; i++)
    {
        <tr [email protected][i].Name name=@i title="@Model.BiData[i].Name" class="tableRow">
            @Html.Hidden("resourceList[" + i + "]", Model.BiData[i].Name)
            <th>
                @Html.CheckBox("checkBoxList[" + i + "]", Model.BiData[i].Selected, new { @class = "resourceCheckbox" })
            </th>
            <th>
                @Model.BiData[i].Name
            </th>
        </tr>
    }


</table>

Arkantos · Accepted Answer · 2016-01-09 13:14:10Z

1

If your checkbox has some id like box then you can check if the event originated from that checkbox and stop processing.

$('#pref-table').on('click',function (event) {

        if(event.target.id === 'box'){
           return;
        }

        var resourceName = $(this).attr('title');
        var categoryName = $('#pref-table').attr('name');
        var url = "/Home/GetSpecific";
        $.post(url, { categoryName: categoryName, resourceName: myClass }, function (data) {

    });

Here's a Pen to demonstrate the idea.

answered Jan 9, 2016 at 13:14

Arkantos

6,6083 gold badges19 silver badges38 bronze badges

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

2 Comments

user2443194 Over a year ago

It would be ok, but the event is not on row, but on entire table, I fail to send a parameter related to this row (title).

user2443194 Over a year ago

Using "#pref-table tbody tr" it work just fine. Thanks!

jcubic · Accepted Answer · 2016-01-09 13:09:25Z

1

Try event.stopPropagation():

$('#pref-table input[type="checkbox"]').click(function(e) {
    e.stopPropagation();
});

answered Jan 9, 2016 at 13:09

jcubic

67.1k58 gold badges252 silver badges466 bronze badges

1 Comment

user2443194 Over a year ago

It works besides the first click, wchich in case it is on checkbox, it still calls controller method. I also have jquery to check if checkbox is clicked to disable some button on the page (not related to this issue) - could this be the problem?

Tom B. · Accepted Answer · 2016-01-09 13:19:16Z

0

Using eventPropagation in the example below:

Html

<table width="100%">
  <tr style="background:yellow">
    <td>
      <input type="checkbox" />
    </td>
  </tr>
</table>

javascript/jquery

$(document).ready(function() {
  $('table tr').click(function(e) {
    alert("row clicked");
  });

  $('input[type=checkbox]').click(function(e) {
    e.stopPropagation();
    alert("checkbox clicked")
  });
});

Jsfiddle demo

answered Jan 9, 2016 at 13:19

Tom B.

2,9823 gold badges16 silver badges35 bronze badges

Comments

Sachin · Accepted Answer · 2016-01-09 13:28:59Z

0

I think your problem is you don't want to activate your event code when user clicks on checkbox, irrespective of checkbox state.

 $('#pref-table tbody tr').click(function (event) {
      if($(event.target).is(":checkbox")) return;
      // your event code
});

edited Jan 9, 2016 at 13:28

answered Jan 9, 2016 at 13:21

Sachin

1,2181 gold badge10 silver badges20 bronze badges

1 Comment

user2443194 Over a year ago

I doesn't work, i think that this refers to table row, not to checkbox.

Collectives™ on Stack Overflow

Jquery - check if checkbox was clicked

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

1 Comment

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related