“单击行时重定向到页面，单击复选框时启用按钮”中的错误。

Question

I have an HTML table . It shows data from database. 7 columns. (One of them is a checkbox)

There's a button outside of the table. Delete users button is initially disabled.

<a id="deleteuser" class="btn btn-danger btn-sm disabled" ><i class="fa fa-trash-o"></i> Delete users</a>

It gets enabled when a checkbox is clicked. My Checkbox :

<input type="checkbox" name="chk" id="chk>

jQuery for enabling/disabling button:

$(function(){
var button=$('#deleteuser');
button.attr('disabled','disabled');
$('#chk').change(function(e){
if(this.checked){
button.removeAttr('disabled');
} else {
button.attr('disabled','disabled');
}
});
});

It's fine till now. Now I've to add one more functionality to this table. When any row is clicked, contents of that row has to redirect to another page so that I can modify that data.

To make table click-able, I used this CSS :

<style>
    table, table tr, table tr td { cursor: pointer;}
</style>

And to edit a particular row, I redirect that row's content (based on User id) to another page. Script I used:

$(document).ready(function(){
$('table.table tr').click(function () {

        window.location='edituserdata.php'
    });

});

----------THE PROBLEM--------------

Now when I click on a row, I get redirected to edituserdata.php ( even when I click a checkbox ). I want to enable delete user button when I click a checkbox and to redirect to another page when I click on any other columns in that row . I went wrong somewhere...can't figure it out. Anyone to help??? Both works, but doesn't work together.

JSFiddle:

http://jsfiddle.net/iamsajeev/8eMDG/

Answer 1

you can check the target click event of the row by checking the target nodeName and prevent further task if it is an anchor. you can also check the checkbox.

$('table.table tr').click(function (ev) {
    if(ev.target.nodeName.toLowerCase() == "a") return;
    if(ev.target.nodeName.toLowerCase() == "input")return;
});

I believe you can also use is to check the element.

$('table.table tr').click(function (ev) {
    if($(ev.target).is("a")) return;
    if($(ev.target).is("input[type=checkbox]"))return;
});

Fiddle