2013-01-28 6 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

하지만 실행하는 TR 이벤트 처리기의 코드의 나머지합니다. – Hailwood

+0

그런 경우에 당신이 스스로 체 키드 속성을 변경하기 때문에'e.preventDefault()'가 대신 작동해야합니다. –

관련 문제