Jump to content

Multiselect Listbox - with checkboxes selection limits


Recommended Posts

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:


caspio-grab.png.953cbafd588b8c7f1d3ed6be861cb68c.png

 

• 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

Link to comment
Share on other sites

  • 3 months later...

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.

 

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...
 Share

×
×
  • Create New...