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

clickイベントがまたは他の場所で発生したかどうかを確認する必要がありcheckboxます。これには、チェックボックスの2番目のイベントハンドラーよりも必要なリソースが少なくて済みます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/

于 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 に答える