knockoutjs 체크 박스를 클릭하고 부모를 클릭하십시오.

Question

행이있는 테이블이 있습니다. 행에 TD (체크 박스가 있음)가 있고 TD에 클릭 기능이 있습니다. TD를 클릭하면 체크 박스가 선택/선택 해제됩니다.

(이것은 선택하지 않은/확인되지 않습니다)

원하는 상황이 내가 TD를 클릭하지만, 체크 박스를 클릭하면 체크 박스의 영상, 값이 변경되지 않을 때 그것은 잘 작동 :

1. I 체크 박스, 체크 박스의 변화 (영상) 값을 클릭 I 함수를 호출 할 수있다. I는 TD 클릭하면

2. 을 (예는 AJAX 호출을 할) 때 체크 박스의 (시각적) 값이 바뀌고 기능. (예 : AJAX 전화 걸기)

우리는 이것을 어떻게 할 수 있습니까? 체크 박스를 클릭

Sample Code

Answer 1

더 큰 영역의 클릭을 만들기 위해 label 요소를 사용, 클릭 이벤트 문제를 방지합니다. 그것은 전체 td을 차지 그래서 저는 여기에 레이블 블록 요소했습니다 :

<td> 
    <label style="display: block"> 
     <input type="checkbox" data-bind="checked: checkBox" /> 
    </label> 
</td> 

이 http://jsfiddle.net/mbest/LsxSh/

Answer 2

는 TD의 클릭 투수 코드를 호출

self.checkBox(!self.checkBox()); 

이 수표를 제거합니다.

Answer 3

TD 이벤트는 입력의 체크 클릭 이벤트를 오버라이드 (override) 할 것으로 보인다

Answer 4

문제 TD 화재의 클릭 핸들러는 또한 당신이 checkbox 기본 클릭 핸들러 모두에 의해 변경됩니다 의미 checkbox을 클릭 할 때이다 checkbox과 TD에 대한 사용자 지정 클릭 처리기 (서로를 상대로). 해결책은 checkbox의 클릭이 TD으로 바뀌는 것을 방지하는 것입니다. 이 바인딩으로 녹아웃에서 수행 할 수 있습니다 : click:function(){return true}, clickBubble:false.

는 여기 행동에 : http://jsfiddle.net/mbest/Eatdh/12/

나는 생각하지만, label를 사용하는 것이 더 나은 방법이 (내 다른 대답을 참조)입니다.

Answer 5

이 꽤 DRY 아니라, 자사의 빠르고 기능 : fiddle

<td data-bind="click:tdClick"> 
     <input type="checkbox" data-bind="checked: checkBox, click:tdClick" /> 
</td>