Select a single radio button with in a table row

replied on March 30, 2017

Now that you have a table and 5 columns of radio button fields, you could leave only one choice for each radio button field, and hide the choice label with CSS (q4 is id of the table):

#q4 .choice .form-option-label {
  display : none;
}

So it would look like this:

1 0

View 1 previous reply

replied on March 30, 2017

Rui, I have that CSS already, my question is not about how to display the radio buttons, I already got that.

My question is how can I make the end user select only one radio button for each row. So for ex if user selects column 2 for row 1 , and then he changes the selection to column 3 for row 1 then column 2 should not be selected anymore. But right now it allows to select all radio buttons in a single row.

0 0

replied on March 30, 2017

Try script like this, it clears other radio buttons in the same row when one is clicked:

$(document).ready(function(){
  $('#q4 .choice input').click(function(){
    var thisId = $(this).attr('id');
    $(this).parents('tr').find('.choice input').not("[id='"+thisId+"']").attr('checked',false);
  })
})

0 0

replied on March 31, 2017

Thanks Rui,

I got it working using another similar kind of script. Thank you

0 0

replied on July 9, 2021 • Show version history

I'm going to pick up on this old thread to add some clarification (as far as what worked for me). The code snippet above is great, except:

.attr('checked',false);

// should instead be

.prop('checked',false);

Also, if anyone is looking to make it so the user can only check one radio button in the whole table (rather than a single row), just change the "parents" specification like so:

$(this).parents('table').find('.choice input')...

If the table in question has been populated dynamically via lookup, you will also need to change the overarching trigger:

$(document).ready(function() {

// will only show values that were there when the page finished loading. 
//  In order to get those dynamic values, change it to 

$(document).on("lookupcomplete", function() {

0 0

Question

Question

Select a single radio button with in a table row

Replies

Sign in to reply to this post.