Help with restricting amount of checkboxes to be checked.

Ask the community
,
1

Good evening friends,

So I have agreed to help a friend out with making a website, and I coded a fair bit back in school but since then haven’t touched it, so I may be a bit out of my depth so bare with me, as I am learning this language as I go.

Quite simply, I am running into troubles with checking multiple textboxes (whether they are checked) by identifying them by ‘type’, rather than individual ID as there is a rather extensive amount of them.

I need help with 1)
Checking whether more than 6 checkboxes are selected, and if so displaying a message.

and finally 2)
Disabling the other textboxes until 1 or more is unticked.

I have been racking my brain for hours, I won’t stress on posting the code as it is bare minimum at the moment as I have only just agreed to help.

If I have to address each individual ID I will probably just lose my mind, but from my readings there HAS to be a way to check them all at once.

Thanks in advance!

2

Hey Spagoogle
Regarding Q1: you can use ‘.value’ to get the values of the selected checkbox as an array, then use ‘.length’


 const checkboxGroups = $w('CheckboxGroup');

 for (var i = 0; i < checkboxGroups.length; i++) {
 const length = checkboxGroups[i].value.length;
    console.log('amount of selected values of', checkboxGroups[i].id, ' is: ', length);
 if (length > 6) {
 // do something
    }

Regarding Q2, can you explain a bit more? I didn’t understand the question.

Best
Binyamin

3

Hi Binjamin,

thanks for your reply!

Sorry I probably should have worded the 2nd part better. Essentially what I mean is if more than 6 boxes are ticked than the rest are greyed out / disabled until one of the ticked boxes is disabled.

Many thanks!

4

ok so this is what I’ve got so far but I still can’t get the darn text to display;

 export function checkbox_click(event,) {
    console.log(event)
 const checkboxGroups = $w('#checkboxgroup1');
 for (var i = 0; i < checkboxGroups.length; i++) {
 const length = checkboxGroups[i].value.length;
    console.log('amount of selected values of', checkboxGroups[i].id, ' is: ', length);

 if (length > 6) {
        $w("#text14").show();
         }
     }
    }
5

@miniricho8498
Use ‘.text’ to change the text element
https://www.wix.com/corvid/reference/$w.Text.html#text

Use ‘.enable’ or ‘.disable’ on the checkboxGroups

https://www.wix.com/corvid/reference/$w.CheckboxGroup.html#disable
https://www.wix.com/corvid/reference/$w.CheckboxGroup.html#enabled

6

@binyaminm I have read all of those over and over and still can’t get the syntax correct! Gah! Is there a way I can select all checkboxes on the page without grouping them? I think that may be causing the problems.

7

@binyaminm Thanks so much! I ended up getting it to work. But I now am running into another error (Go figure!)

I’m assuming this is a logical error but I cannot for the LIFE of me figure it out, could you please have a look?

I swear I have used if and else statements in other pages… But it does not want to work here at all. Any ideas?

 let  value = $w("#dropdown1").value;
 if  (value === "SML" && (length >= 6)); {
        $w("#checkboxgroup1").disable();
        $w("#text14").show(); 
      }
 else /// unexpected token 'else'? No idea...
        (value === "" && (length < 6));
        $w("#checkboxgroup1").enable();
        $w("#text14").hide(); }
 }
8

Glad to hear :slight_smile:
I see several errors in your code.
see:

let  value = $w("#dropdown1").value;
if (value === "SML" && length >= 6) {
    $w("#checkboxgroup1").disable();
    $w("#text14").show();
} else {
 if (value === "" && length < 6) {
        $w("#checkboxgroup1").enable();
        $w("#text14").hide();
    }
}
9

@binyaminm Thank you again so much, no idea how I missed that.
Alright now that a lot of the syntax is down it’s now just up to writing everything out, thanks again! Think I got it from here, we will see! :slight_smile: