Multiselect Listbox - with checkboxes selection limits

[geoffdude]

Hello all -

I know there are many Multiselect listbox topics that touch on some of my issues, but I can't find any info on how to reset a checkbox to false (off) after it's triggered a change event.

Quick summary:

• I have a multiselect listbox named "chkbox1" that has 3 checkboxes / options.

• I want to limit the selection options to only 2 allowed, and pass those checked values to a data table (which is does now).

• Problem = once 3rd checkbox is checked, it fires to limit collected values correctly, and shows an alert msg correctly.. but the 3rd checkbox stays "checked" and I can't figure out how to have it reset to unchecked.

• Test page form is here: https://c0esh141.caspio.com/dp/f988200040b732ce715c40458847

• Screen grab of problem below:

 

• The top-most listbox named "address" uses the datatype "text 255" and it works fine, as intended.
• However, the multiselect named "chkbox1" uses the datatype "list-string" and the problem of an unwanted checkbox still checked.

My code is below.

<script type="text/javascript">
  
// enable multiple selections of listbox "address"
  
document.addEventListener('DataPageReady', assignMultiple);

function assignMultiple() {

   let fieldNameB = "InsertRecordaddress";
   let xB=document.getElementsByName(fieldNameB);
   xB[0].multiple=true;

}

// limit "address" choices with alert msg
  
$(document).ready(function() {

          var myMultiListBoxAddy = document.getElementsByName("InsertRecordaddress")[0];
          var last_valid_selected = null;

          $(myMultiListBoxAddy).change(function(event) {

            if ($(this).val().length > 3) {

              $(this).val(last_valid_selected);

alert("Alert: you can't pick more than"+" "+($(this).val().length)+". "+"Your current selections are"+" "+last_valid_selected);

            } else {
              last_valid_selected = $(this).val();
            }
          });
  
      });

  
  // limit "chkbox1" choices with alert msg
  
$(document).ready(function() {

          var myMultiListBox = document.getElementsByName("InsertRecordchkbox1")[0];
          var last_valid_checked = null;

          $(myMultiListBox).change(function(event) {


            if ($(this).val().length > 3) {

              $(this).val(last_valid_checked);

alert("Howdy -"+" "+"You can't pick more than"+" "+($(this).val().length-1)+". "+"Your choices are numbers"+" "+last_valid_checked);

            } else {
              last_valid_checked = $(this).val();
            }
          });
  

      });
</script>

Thx for any and all help.

 

Geoff

[Volomeister]

Hi there!

I've spent quite some time figuring out why it is not working and concluded that this checkbox is being checked after whatever callback you run on the change/click event.
The only solution I found was to delay a bit programmatic "unchecking" of a box using setTimeout function.

Here is a solution that worked on my end:

const allCheckBoxes = document.querySelector('.cbFormMultiSelectText').parentElement.querySelectorAll('input[type="checkbox"]');

document.querySelectorAll('.cbFormMultiSelectText').forEach( cbFormMultiSelect => {cbFormMultiSelect.addEventListener('click', e => {
  
let checkbox;
let numberOfChecked = document.querySelectorAll('.cbFormMultiSelectText input:checked').length;
if(e.target.tagName == "DIV") {
checkbox = e.target.querySelector('input[type="checkbox"]');
  if(checkbox.checked) {
  numberOfChecked--;
  }else {numberOfChecked++;}
}else if (e.target.tagName == "LABEL") {
checkbox = e.target.parentElement.querySelector('input[type="checkbox"]');
  if(checkbox.checked) {
  numberOfChecked--;
  }else {numberOfChecked++;}
}else if (e.target.tagName == "INPUT") {
checkbox = e.target;
}
  console.log('numberOfChecked '+ numberOfChecked)
if(numberOfChecked>2) {

 setTimeout(function(){checkbox.checked = false;}, 5)

}
  
}, true)})

I've also run it in console on your test page and it worked fine.

Please test and let me know if you found it useful.

 

[DesiLogi]

Hi @Volomeister,

I'm a bit late to this thread but thanks for posting this solution. I have the same issue as the OP--I was able to use their code to show the message after the choice limit but had the same problem (the check remained). When I tried your code I couldn't get it to work at all. I'm using a list box field with string/text multiple choices--would that throw this off? It looks like your solution doesn't need to name the actual field as it applies to all check boxes in the form.

This is the code I'm using (yours exactly, I believe):

<script>
const allCheckBoxes = document.querySelector('.cbFormMultiSelectText').parentElement.querySelectorAll('input[type="checkbox"]');

document.querySelectorAll('.cbFormMultiSelectText').forEach( cbFormMultiSelect => {cbFormMultiSelect.addEventListener('click', e => {
  
let checkbox;
let numberOfChecked = document.querySelectorAll('.cbFormMultiSelectText input:checked').length;
if(e.target.tagName == "DIV") {
checkbox = e.target.querySelector('input[type="checkbox"]');
  if(checkbox.checked) {
  numberOfChecked--;
  }else {numberOfChecked++;}
}else if (e.target.tagName == "LABEL") {
checkbox = e.target.parentElement.querySelector('input[type="checkbox"]');
  if(checkbox.checked) {
  numberOfChecked--;
  }else {numberOfChecked++;}
}else if (e.target.tagName == "INPUT") {
checkbox = e.target;
}
  console.log('numberOfChecked '+ numberOfChecked)
if(numberOfChecked>1) {

 setTimeout(function(){checkbox.checked = false;}, 5)

}
  
}, true)})
</script>