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

Question

Question

Javascript question - only check one box based on dropdown

Forms
Updated September 21, 2022
asked on September 21, 2022 • Show version history

I've come across several questions and the closest one was this one:

https://answers.laserfiche.com/questions/79437/How-to-select-checkboxes-in-one-field-based-off-of-a-selection-in-another

 

However, when I recreate the solution, all three checkboxes are being checked.  I need a way to have just one or 2 boxes checked based on input matching

 

$(document).ready(function () {
  $('.jobknowledge select').on('change', function () {
    if ($('.jobknowledge select').val() == 2) {
      $('.jobknowledgecheckbox input').prop('checked', true);
      
      
    }
  });
});

Capture.JPG
Capture.JPG (31.52 KB)
Download
0 0

Answer

SELECTED ANSWER
replied on September 21, 2022 
$(document).ready(function () {
  $('.jobknowledge select').on('change', function () {
    // Clear all checks
    $('.jobknowledgecheckbox .choice input').each(function() {
      $(this).eq(0).prop('checked', false);
    });
    var CurDropDown = $(this).val();
    // spaces in the checkbox choice value are replaced with _ (ex. value=choice_1)
    if (CurDropDown == "choice 1") {
      $('.jobknowledgecheckbox .choice input[value=choice_1]').prop('checked', true);
    } else if (CurDropDown == "choice 2") {
      $('.jobknowledgecheckbox .choice input[value=choice_2]').prop('checked', true);
    } else if (CurDropDown == "choice 3") {
      $('.jobknowledgecheckbox .choice input[value=choice_3]').prop('checked', true);
    }
  });
});

 

1 0
View 3 previous replies
replied on September 21, 2022

Thank you so incredibly much.  This is exactly the start I needed to move forward.

0 0
replied on September 21, 2022 • Show version history

Another option would be to just take care of setting the true/false state in a single loop and you could get rid of the if else statements that follow.

In the loop, instead of setting them all to unchecked, set the checked state based on a comparison of the two values using replaceAll to deal with underscores.

For example,

$(document).ready(function () {
  $('.jobknowledge select').on('change', function () {
    var CurDropDown = $(this).val();

    $('.jobknowledgecheckbox .choice input').each(function (){
        // set checked state by comparing values
        // underscores from checkbox value replaced with spaces
        $(this).prop('checked', ($(this).val().replaceAll('_',' ') == CurDropDown));
    });
  });
});

 

2 0
replied on September 21, 2022 • Show version history

I know the example I provided is for drop downs.  Is there a way for your example to examine the contents of a single-line field?  Thinking it would be helpful if I use lookups for a DB

0 0
replied on September 21, 2022

All you would do need to do is change "select" to "input"

Or you could use ":input" which is a jQuery pseudo selector and that includes input (single line, radio, checkbox), dropdown (select), and multi line (textarea).

Only thing to be careful with any solution you use is going to require a match between the values, so if you do a single line and the user's can edit the values they could easily enter something that doesn't match a checkbox.

You can populate the options for a dropdown from a lookup. If the concern is that the underlying value isn't the same as the display text, you could populate the dropdown with the display options, then use a second lookup to populate your single line field with the value that corresponds to the selected option.

If you make the single line read-only and hide it you don't have to worry about the users changing anything that would break the function.

1 0
replied on September 21, 2022 • Show version history

That is a cool trick with :input - definitely putting that in my notes.

 

I share the same concerns with the end user messing it up somehow.  That is why I initially started with a drop down, but the lookup has over 100 values in it, and the end user may not know to just start typing into the drop down to find the value.


Either way because of the wonderful help I have received, I have two options to present to the form requester.

 

Thank you again.

0 0
replied on September 21, 2022

That makes sense. I've run into similar situations.

One thing you could do is set a single line to be populated by the lookup without any filters, then it will show the autocomplete.

Then, you can add a hidden dropdown that it also populated by the same lookup to get a list of "valid" option.

Finally, you could add a custom validator to make sure the value entered into the single line matches an option from the hidden drop down.

Like so,

$(document).ready(function(){
  $('.checkboxSource input').on('change',function(){
    // change everything to upper case to remove case sensitivity
    var CurDropDown = $(this).val().toUpperCase();
    
    $('.checkboxTarget .choice input').each(function(){
      var option = $(this).val().replaceAll('_',' ').toUpperCase();
      $(this).prop('checked', option == CurDropDown);
    });
  });
  
  // Validate selection from lookups
  window.Parsley.addValidator('validselection', {
    validateString: function(value) {
      var selection = $('.checkboxSource input').val().toUpperCase();
      var options = [];

      // populate array of valid options
      $('.checkboxSelect option').each(function(){
        options.push($(this).text().toUpperCase());
      });

      return $.inArray(selection,options) > 0;
    },
    messages: {
      en: 'Invalid selection.',
    }
  });
  
  // Assign validator to selection field
  $('.checkboxSource input').attr('data-parsley-validselection', '');
});

Since this leverages the parsley validation inherently used by Forms, it would even prevent the user from submitting if the field is required.

I also added code to change everything to upper case to remove any case sensitivity since you'd be dealing with free form entry.

 

If you have over 100 values, then the loop approach is going to be much easier to maintain than the if else since with the loop you don't have to explicitly define every possible selection.

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.

Details
Attachments
Related Posts
Loading ...