Jquery：チェックボックスで 'click'イベントを無効にする

Question

現在の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(); 

Answer 1

あなたはclickイベントがどこかcheckboxかに解雇されたかどうかを確認する必要があります。 これは、e.stopPropagationというチェックボックスの2番目のイベントハンドラより少ないリソースを必要とします。

$('.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/

Answer 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/