change radio button state when parent is clicked

Question

I have this markup :

<div class='A'>
    <input type='radio' name='B' class='B' />
</div>
<div class='A'>
    <input type='radio' name='B' class='B' />
</div>
<div class='A'>
    <input type='radio' name='B' class='B' />
</div>

The desired functionality is to select the radio either by clicking parent div or the radio input itself and if the radio is already checked then click on parent will have no effect i.e return false.

I have made it to change on click of parent, but when i click on the radio button , nothing happens. What's wrong with my approach ?

jQuery :

$('input:radio').closest('div').on('click', function (e) {
    if ($('input:radio', this).prop('checked') === true) {
        console.log("returning false");
        return false;
    }
    $('input:radio', this).prop('checked', true);
    console.log("Clicked : " + $(this).attr('class'));
});

Fiddle : http://jsfiddle.net/pSSc9/1/

Answer 1

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

Check Fiddle

Answer 2

May I suggest using label elements instead of divs? You'll get the same behavior and won't need javascript at all. CSS will take care of the appearance. I made that simple change in your fiddle, and it worked fine.

http://jsfiddle.net/jeffman/WQEDv/2/

Answer 3

DEMO

e.preventDefault(); disables the radio button click event

$('input:radio').closest('div').on('click', function (e) {
    $('input:radio', this).prop('checked', true);
});

Answer 4

The click event from the radio button is bubbling up to the div, so the callback gets triggered in both cases. The problem is that you're preventing the default action which, in the case of the radio button, is it becoming checked.

What you can do is add a condition that exits the callback if the element clicked was the radio button:

$('input:radio').closest('div').on('click', function (e) {
    if ($(e.target).is('input')) {
        return;
    }

    if ($('input:radio', this).prop('checked') === true) {
        console.log("returning false");
        return false;
    }
    $('input:radio', this).prop('checked', true);
    console.log("Clicked : " + $(this).attr('class'));
});

Working example