Question: AvCheckboxGroup - disable checkboxes after hitting the limit

[diegodesouza]

Use case: I have 12 checkboxes, and am limiting the user to check by 6. Is there a way to disable the other 6 after the 6th checkbox is checked?

            <AvForm onValidSubmit={() => savePreferences()}>
                <AvCheckboxGroup
                  validate={{
                    max: {
                      value: 6,
                      errorMessage: 'Please select up to 6 items only.',
                    },
                  }}
                  name="quickView"
                >
                  <Row>
                    <Col sm="4">
                      <AvCheckbox label="Care Goals" value="Care Goals" />
                      <AvCheckbox label="Allergies" value="Allergies" />
                      <AvCheckbox label="Medications" value="Medications" />
                      <AvCheckbox label="Care Alerts" value="Care Alerts" />
                    </Col>
                    <Col sm="4">
                      <AvCheckbox label="Care Team" value="Care Team" />
                      <AvCheckbox label="Member ID Card" value="Member ID Card" />
                      <AvCheckbox label="Your Instructions" value="Your Instructions" />
                      <AvCheckbox label="Diagnosis" value="Diagnosis" />
                    </Col>
                    <Col sm="4">
                      <AvCheckbox label="Person-centered Service Plan" value="Person-centered Service Plan" />
                      <AvCheckbox label="Your Notes" value="Your Notes" />
                      <AvCheckbox label="Authorization Status Reminders" value="Authorization Status Reminders" />
                      <AvCheckbox label="Claim Status Reminders" value="Claim Status Reminders" />
                    </Col>
                  </Row>
                </AvCheckboxGroup>
                <Button className="float-right" color="primary" type="submit">
                  Save Preferences
                </Button>
              </AvForm>

[diegodesouza]

I'm trying to accomplish this by getting the form's ref <AvForm onValidSubmit={() => savePreferences()} ref={this.quickViewForm}> But haven't been successful in setting the _inputs to disabled yet. I see a function that returns a bool for isDisabled only. Can you add a function that disable an input?

[diegodesouza]

@TheSharpieOne @robmcguinness @GoPro16 anyone?

[TheSharpieOne]

Disabling is bad. Imagine a user who has 6 checkboxes checked. The user wants to check another value but the user can't. The user only sees the disabled checkboxes but doesn't really understand why they are disabled. The user just believes those options are just unavailable, no realizing they first need to uncheck a checked checkbox first. Better UX would be to let the user do what they want to do and then let them know (via some feedback) that it is invalid. Then, they can decide which checkboxes they want to keep checked. This is how it currently works and the reason why it was made to work this way. To do what you want is kinda similar to the ask for disabling the submit button when a form is not valid (which is also bad UX). Just like that this library doesn't do that out of the box and makes it difficult to do since it is not desired. You'd probably have to make your own AvCheckboxGroup and AvCheckbox as well (or extend the ones from the lib, overriding the group context and checkbox render). The group would need to expose some like the max checked limit reached via context so the checkboxes would know the limit has been reached. Then the checkboxes that are not checked (they should each know their own state) can add the disabled attribute.

[diegodesouza]

Not arguing with that. I also believe the same. I have presented the same to our Designer as well as product owner. Still they want this functionality. I managed to get something up and running, i thought it would be easier to have something in place out of the box, because unfortunately these requirements keep coming back to us. =( Thanks for taking the time to respond and explain it. I'm closing it for the time being.