Jquery：禁用复选框上的“click”事件

在我当前的JQuery中，如果用户单击表中的行，我会有一个事件可以选中或取消选中复选框。 这样做的问题是，如果用户实际选中了复选框，则jquery将触发复选框事件并选中/取消选中该框，但随后将触发TR事件，然后撤消复选框值。

在这里查看示例： http ： //jsfiddle.net/radi8/KYvCB/1/

我可以禁用复选框，但如果用户尝试选中该复选框，TR事件将不会触发。

我需要的是一种方法来禁用复选框的“click”事件，但仍然允许在选中复选框时触发TR事件。

var charges = { init: function() { // get the selected row checkbox //$('.charges').attr('disabled', true); $('.rowclick tr').click(function() { if ($(this).find('td input.charges:checkbox').is(':checked')) { $(this).find('td input.charges:checkbox').attr("checked", false); } else { $(this).find('td input.charges:checkbox').attr("checked", true); } }); } }; charges.init(); 

Answer 1

您需要检查是否在checkbox或其他位置触发了click事件。 对于带有e.stopPropagation的复选框，这需要的资源少于第二个事件处理程序。

  $('.rowclick tr').click(function(e) { if($(e.target).closest('input[type="checkbox"]').length > 0){ //Chechbox clicked }else{ //Clicked somewhere else (-> your code) if ($(this).find('td input.charges:checkbox').is(':checked')) { $(this).find('td input.charges:checkbox').attr("checked", false); } else { $(this).find('td input.charges:checkbox').attr("checked", true); } } }); 

工作示例： http ： //jsfiddle.net/KYvCB/5/

Answer 2

你需要停止click事件的传播：

 var charges = { init: function() { $('.td input.charges:checkbox').on('click', function (e) { e.stopPropagation(); }) $('.rowclick tr').click(function() { if ($(this).find('td input.charges:checkbox').is(':checked')) { $(this).find('td input.charges:checkbox').attr("checked", false); } else { $(this).find('td input.charges:checkbox').attr("checked", true); } }); } }; charges.init(); 

http://jsfiddle.net/KYvCB/4/