CODEWITHSUNDEEP
javascriptjqueryradio-button
Alex
Alex

Reputation: 1250

Can't change radio button selection

I have some tables (more than one), when I select one table by clicking on it, I need that the first radio button is selected.

It works fine, but if I want to change the option of the radio button i cant. It keeps always the first one marked.

Here is a fiddle with the issue: https://jsfiddle.net/jzbm4j60/

    $('table').click(function(event) {
        $('table').removeClass('focus');
        event.stopPropagation();
        $(this).addClass('focus');
        var $firstRadio = $(this).find('input:radio[name=rdGoFerrys]:first');
        var $secondRadio = $(this).find('input:radio[name=rdBackFerrys]:first');
        if ($firstRadio.is(':checked') === false) {
           $firstRadio.prop('checked', true);
        }
        if ($secondRadio.is(':checked') === false) {
           $secondRadio.prop('checked', true);
        }
     });

Upvotes: 0

Views: 470

Answers (1)

j08691
j08691

Reputation: 208003

The click event on your inputs is bubbling up the DOM and triggering the click event you have on your table. Stop that behavior by using:

$('input').click(function(e) {
    e.stopPropagation()
})

Upvotes: 2

Related Questions