I am trying to limit the number of checkboxes based on the radio button choice. I have 4 radio buttons and 12 checkboxes and I want the user to be able to pick:
a minimum of 2 checkboxes and a maximum of 4 checkboxes when he selects the first radio button,
a minimum of 5 checkboxes and a maximum of 6 checkboxes when he selects the second radio button,
a minimum of 7 checkboxes and a maximum of 8 checkboxes when he selects the third radio button,
a minimum of 10 checkboxes and a maximum of 12 checkboxes when he selects the fourth radio button.
How do you mean? The validateCheckboxes() function checks if too many or too few checkboxes have been checked depending on which radio button is checked. It then writes the validation info to the console log. See the console.log() lines in that function. You’d still have to change the function to do something useful when too few/many checkboxes have been checked. But I’m not sure exactly what you want to happen when the validation fails.
I take it that when the 5-6 radio button is selected, that you want the selection of a 7th checkbox to be refused.
Some clarifying questions need to occur though.
What happens when someone goes from 5 to 4 checkboxes. Will their attempt to deselect a checkbox be denied?
And more importantly, when no checkboxes are selected, what happens when the 5-6 radio is selected. Will five checkboxes be selected immediately upon the radio button being selected?
What happens when 6 checkboxes are selected, and the 2-3 radio option is selected? Are only the first 3 checkboxes retained?
I recommend that no denial or changes occur and that you show a validation error telling them about the problem, allowing the user to correct the problem before the form can be submitted.
I am using Mozilla Firefox, the codes seems to he correct but when I select check boxes and click validate nothing happens. For example when I select the first radio button which allows a maximum of 4 check boxes to be selected and I select 5 check boxes and click validate it doesn’t show any error.
I’m not at a computer right now, but I believe that he’s wanting it to validate on every change, and to actively prevent actions that break the validation.
I have written the HTML and I wrote a JavaScript code to do this but it didn’t give me what I had in mind. I know the code Cletus wrote is correct I just don’t know how to insert it to make it work that what I am saying. Plus it seems new users are allowed to attach documents so I will copy out the HTML code and paste it for you to see. Thank you cletus
That’s the HTML code, I attached square brackets to the name of the check boxes to allow me save the selected check boxes in an array and send it to an email address. If a user reaches the maximum number of check boxes allows let other check boxes be disabled if he deselects one let the uncheked one be enable to allow him select another check box
Edit your post, highlight the code with your mouse (so it is marked blue), then hit the code button in the toolbar in the editor pane (looks like this: </>)
I’m not sure it’s a good idea trying to limit the choices by disabling checkboxes. I agree with what Paul wrote in post #5, that it’s probably better to just let the user check/uncheck checkboxes freely and validate the selection before the form is posted.
Sure, you could disable all unchecked checkboxes when the current maximum number of checkboxes have been checked. But if you do that, should you also “lock” the selection for the minimum value? I mean, if the radio for 5-6 checkboxes have been selected and 5 checkboxes are currently checked, should you be allowed to uncheck one of the checked ones? Or should you be forced to check one more checkbox before you’re allowed to uncheck another one?
What should happen if you have the radio for 5-6 allowed checkboxes selected, 5 checkboxes are checked and you select the radio for 2-4 allowed checkboxes instead? That would put the form in an invalid state. Or should the radio for 2-4 options get disabled if more than 4 checkboxes have been checked? There are many things to consider here.
Yes good point Cletus, the user should be the one to make his choice, Owk with that in mind how do I insert the JavaScript code you gave me to work with my HTML code. Also thanks a lot guys for your comments and efforts.