Question

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

请在此处查看示例：http://jsfiddle.net/radi8/KYvCB/1/

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

我需要的是一种方法来禁用复选框的“点击”事件，但仍然允许在选中复选框时触发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

您需要检查click事件是否在checkbox或其他地方触发。 这需要的资源少于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/

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

2 个答案: