Click a check box and table row is not synchronized

How can I enable the button when user checks the checkbox itself? Currently the button will be enabled when user clicks on the table row(clickable row).

var btn = $("#btn");    
btn.attr("disabled","disabled");

$("#table tbody").on("click",".clickable-row", function (e) {   
    if (e.target.type !== 'checkbox') {
        $(':checkbox', this).trigger('click');

        if($(':checkbox', this).is(":checked") == true){
            btn.removeAttr('disabled');
            $('form').append('<input type="hidden" name="chk" value="'+$(':checkbox', this).val()+'" />');              

        } else {
            btn.attr("disabled", !$(':checkbox', this).is(":checked"));
        }
    }
});