2013-01-28 2 views
1

У меня есть таблица, где каждая строка имеет <input type="checkbox" /> в первой ячейке.Игнорировать флажок?

У меня есть настройка обработчика кликов на <tr>, который, среди прочего, переключает флажок.

Это прекрасно работает, если только я не щелкнул по фактическому флажку, в результате чего флажок, имеющий противоположное состояние, должен быть таким, каким он должен был быть, поскольку он дважды переключается, по умолчанию и по умолчанию <tr> обработчик события.

Что я хочу сделать, это в основном игнорировать флажок, а просто отвечать на щелчок на tr.

Вот мой обработчик событий для тр

$('.files-table tbody').on('click', 'tr', function (e) { 
    var check = $('.check', this); 
    check.prop('checked', !check.prop('checked')); 

    check.prop('checked') ? selected++ : selected--; 
    numSelected.html(selected + ' item' + (selected === 1 ? ' ' : 's ') + 'selected: '); 
    if (selected == 1) { 
     withSelected.addClass('in').removeClass('hide'); 
     noSelected.removeClass('in').addClass('hide'); 
    } else if (selected == 0) { 
     withSelected.removeClass('in').addClass('hide'); 
     noSelected.addClass('in').removeClass('hide'); 
    } 

    if (check.prop('checked')) { 
     selectedItems[check.data('type')].push(check.data('id')+""); 
    } else { 
     selectedItems[check.data('type')].splice(check.data('id')+""); 
    } 
    console.log(selectedItems); 
    $(this).toggleClass('info'); 
}); 

А вот пример строки:

<tr> 
    <td style="width:15px;"> 
     <input class="check" type="checkbox" data-id="6" data-type="directories"> 
    </td> 
    <td> 
     <a href="/files/browse/1. First/1.1 First Child of First/6" 
     class="needs-tooltip" 
     title="Browse Directory"> 
     <i class="icon icon-folder-close"></i> 
     </a> 
     1.1 First Child of First 
    </td> 
    <td>Directory</td> 
    <td>0 Items</td> 
    <td>27 Jan 2013</td> 
    <td>--</td> 
    <td>--</td> 
</tr> 

ответ

2

Вы можете проверить, где щелчок возник из:

if (! $(e.target).is(':checkbox')) { 
    $('.check', this).prop('checked', function (i, el) { 
     el.checked ? selected-- : selected++; 
     return ! el.checked; 
    }); 
} 
+0

Я принял этот ответ, пока не совсем точно, как я его решил, ответ действительно включал проверку цели. – Hailwood

1

Предотвращение распространения Вашего мероприятия для родителей:

$(".check").on('click', function (e) { 
    e.stopPropagation(); 
}); 

Это позволит продолжить нормальное поведение флажка (переключение состояния проверки), но ваш клик событие не получит доступ к родительскому клику.

+0

Но я хочу, чтобы остальная часть коды в обработчике событий тра для запуска. – Hailwood

+0

В этом случае 'e.preventDefault()' должен работать вместо этого, поскольку вы меняете свойство chekced самостоятельно в любом случае. –