$('.A').on('click', function (e) {
if ($(e.target).is('.B')) {
e.stopPropagation();
// So that event does not bubble when radio is selected
} else {
if ($('input:radio', this).prop('checked') === true) {
console.log("returning false");
return false;
}
$('input:radio', this).prop('checked', true);
}
console.log("Clicked : " + $(e.target).attr('class'));
});
The problem with your code was you were returning false when the checkbox is clicked. So you were indirectly doing event.preventDefault()
and event.stopPropagation()
by doing return false;
You explicitly need to set the checked property to true only when clicked on the div. But when you click on the radio it performs the default action. So you need to stop the propagation of the event.