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

Question

Question

Forms - Checkboxes - Conditionally hide choices based on other fields on the form

asked on March 9, 2022

Hello,

I have a customer with a form used to inspect vehicles. At the bottom of the form, we have a checkbox (probably should be a radio button, but whatever) with three choices. Screenshot below:

Also on this form, there is a checkbox field where issues with the vehicle can be checked. Screenshot of that field:

What this customer would like is for the "Condition of above vehicle is satisfactory" option in the "State of Vehicle" checkbox to be unavailable if something is checked in the "Truck Defective Items" checkbox. Is that possible?

Thanks!

0 0

Replies

replied on March 17, 2022 Show version history

The native Field Rules won't work to hide parts of a checkbox like that.  But it is possible with Javascript.

Here's some simple code that should work (assuming class names of truckDefectiveItems, stateOfVehicle, and value="Satisfactory" on the stateOfVehicle checkbox):

$(document).ready(function () {
  
  //Any time changes are made to the checkbox with class name truckDefectiveItems,
  //the number of check items is counted.
  //If at least one item is checked, then the Satisfactory item on the checkbox
  //with class name stateOfVehicle, will be unchecked and hidden.
  $('.truckDefectiveItems').change(function(){
    var howManyChecked = 0;
    $('.truckDefectiveItems input').each(function(){
      if($(this).prop('checked'))
      {
        howManyChecked++;
      }
    });
    if(howManyChecked >= 1)
    {
      $('.stateOfVehicle input[value="Satisfactory"]').prop('checked', false);
      $('.stateOfVehicle input[value="Satisfactory"]').closest('.choice').hide();
    }
    else
    {
      $('.stateOfVehicle input[value="Satisfactory"]').closest('.choice').show();
    }
  });

});

 

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

Sign in to reply to this post.