3

在我当前的 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();
4

2 回答 2

15

您需要检查事件是否在 a或其他地方click触发。这需要的资源少于复选框的第二个事件处理程序。checkboxe.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/

于 2012-04-24T14:11:45.607 回答
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/

于 2012-04-24T14:10:05.387 回答