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

Discussion

Discussion

Javascript to select only one checkbox in a table

Forms
Updated May 7, 2018
posted on April 27, 2018

I have a table where each Row has a single checkbox field at the beginning of each row. Currently the user can check the checkbox for any and all rows.

What I am looking for is that when a user clicks on a checkbox in any row, JS would uncheck any other rows checkbox that has already been checked so that only 1 row's checkbox can be checked at anytime.

0 0
replied on April 27, 2018 • Show version history

Try this:

Where the checkbox has the class "checkBox"

  $(document).on('click', '.checkBox input', unCheck);
  
  function unCheck() {

    $('.checkBox input').removeAttr("checked");
    $(this).prop("checked", true);
    
  }

 

1 0
View 4 previous replies
replied on April 27, 2018

Hi Raul, I got this to work. One question for you, the rows in the forms that were selected had calculations in some of the fields based on the box being checked. When the box is unchecked, the formulas should recalculate but they do not.

My requirements would be to pull a value from a field in the Table row based on the box checked, or to have the row recalculate when the Check is unchecked. 

If you have any thoughts on this it would be appreciated.

0 0
replied on April 27, 2018

Hi Raul, I figured it out

    var selectedID = $(this).parents('tr').find('.ShowID input').val();

1 0
replied on April 27, 2018

Steve,

Thanks for sharing the solution!

0 0
replied on May 4, 2018

Hi Steve,

I have a similar situation.  Where did you insert var selectedID = $(this).parents('tr').find('.ShowID input').val();?  

Pete

0 0
replied on May 4, 2018

Hi Pete, once I found the value I assigned it to another field (class of that field was "job"). Once assigned to the field you need to trigger that field for Forms to know the value changed so other fields running calculation or lookups off of it will run with the new value.

var selectedID = $(this).parents('tr').find('.ShowID input').val();
      $('.job input').val(selectedID);
    $('.job input').trigger('change');

Hope this helps

Steve

0 0
replied on May 7, 2018

Hi Steve,

I'm not a JavaScrpit expert.  Not sure where in my JavaScript I need to insert what you sent me.

0 0
replied on May 7, 2018 • Show version history

Hi Pete, I'm not an expert either :)

This is how I did it

$(document).on('click', '.injurycheckbox input', unCheck)

function unCheck()  {
$('.injurycheckbox input').removeAttr("checked");
$(this).prop("checked", true);
var selectedID = $(this).parents('tr').find('.ShowID input').val();
$('.points input').val(selectedID);
$('.points input').trigger('change');
}
 

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

Sign in to reply to this post.

Details
Related Posts
Loading ...