You are viewing limited content. For full access, please sign in.

Question

Question

Change the value of a radio button in the remaining rows in a table when one row is seleted

asked on April 20, 2022

We have a form that gives a list of available tasks to a user to select from with a radio button field that have two options for Yes and No. The table is populated with a lookup and the length will vary depending on how many tasks are available.  The default value of the button is set to no, but this can be changed.  The requirement is that only on task can be selected at a time and I want to use JavaScript to set the remaining rows to No if Yes is selected on a row.

 

Can someone please assist?

 

0 0

Answer

SELECTED ANSWER
replied on April 20, 2022

You can use the following, just set a class called "myTable" on your table, and a class called "myRadio" on the radio column.

You can use whatever class names you like, just make sure they are unique to those elements and that you update the code accordingly.

The event handler is attached to the table since the rows don't exist on document ready (i.e., they're added later via the lookups) so this avoids unnecessary complexity.

By attaching it to the table we can use event bubbling to detect changes to the radio buttons regardless of whether or not those rows/inputs exist when the handler is assigned.

$(document).ready(function(){
  // delegated event handler watches the table for changes to the radio inputs
  $('.myTable').on('change','.myRadio input[value="Yes"]',function(){
    if ($(this).is(':checked')){
      // get parent row and table body
      var row = $(this).parents('tr');
      var table = $(this).parents('tbody');
      
      // loop each row in table body
      table.find('tr').each(function(index, value){
        // if not same row as "yes" value
        if (!row.is(value)) {
          // select "no" value
          $(value).find('input[value="No"]').prop('checked',true).change();
        }
      });
    }
  });
});

 

1 0
replied on April 20, 2022

Thanks Jason

 

That works great!!

0 0

Replies

You are not allowed to reply in this post.
You are not allowed to follow up in this post.

Sign in to reply to this post.