Fix checkboxes disabled bug (#7831)

frontend/src/app/commonComponents/Checkboxes.test.tsx

@@ -0,0 +1,45 @@
+import { render, screen } from "@testing-library/react";
+
+import Checkboxes, { generateCheckboxColumns } from "./Checkboxes";
+
+describe("Checkboxes", () => {
+  it("generateCheckboxColumns - creates array of arrays, subarrays of length n, when passed an array of items and n", () => {
+    const testArray = [1, 2, 3, 4, 5, 6, 7, 8, 9];
+    expect(generateCheckboxColumns(testArray, 3)).toEqual([
+      [1, 2, 3],
+      [4, 5, 6],
+      [7, 8, 9],
+    ]);
+  });
+
+  it("renders correctly", () => {
+    const boxes = [
+      {
+        value: "Red",
+        label: "Red",
+        checked: true,
+      },
+      {
+        value: "Blue",
+        label: "Blue",
+        checked: false,
+      },
+    ];
+    const { container } = render(
+      <Checkboxes
+        boxes={boxes}
+        name="colors"
+        disabled={true}
+        required
+        onChange={() => {}}
+        legend="Select a color"
+        numColumnsToDisplay={2}
+      />
+    );
+    expect(screen.getByLabelText("Red")).toBeDisabled();
+    expect(screen.getByLabelText("Red")).toBeChecked();
+    expect(screen.getByLabelText("Blue")).toBeDisabled();
+    expect(screen.getByLabelText("Blue")).not.toBeChecked();
+    expect(container).toMatchSnapshot();
+  });
+});

frontend/src/app/commonComponents/Checkboxes.tsx

@@ -62,6 +62,7 @@ const Checkboxes = (props: Props) => {
     inputRef,
     hintText,
     numColumnsToDisplay = DEFAULT_COLUMN_DISPLAY_NUMBER,
+    disabled,
   } = props;
 
   const checkboxFragmentToRender = (boxes: Checkbox[]) => (
@@ -70,6 +71,7 @@ const Checkboxes = (props: Props) => {
       name={name}
       onChange={onChange}
       inputRef={inputRef}
+      disabled={disabled}
     />
   );
 

frontend/src/app/commonComponents/__snapshots__/Checkboxes.test.tsx.snap

@@ -0,0 +1,77 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Checkboxes renders correctly 1`] = `
+<div>
+  <div
+    class="usa-form-group padding-0"
+  >
+    <fieldset
+      class="usa-fieldset prime-checkboxes"
+    >
+      <legend
+        class="usa-legend"
+      >
+        Select a color
+        <abbr
+          class="usa-hint usa-hint--required"
+          title="required"
+        >
+           
+          *
+        </abbr>
+      </legend>
+      <div
+        class="grid-row checkboxes"
+      >
+        <div
+          class="tablet:grid-col"
+        >
+          <div
+            class="usa-checkbox"
+          >
+            <input
+              checked=""
+              class="usa-checkbox__input"
+              data-testid="colors-Red"
+              disabled=""
+              id="colors-Red"
+              name="colors"
+              type="checkbox"
+              value="Red"
+            />
+            <label
+              class="usa-checkbox__label"
+              for="colors-Red"
+            >
+              Red
+            </label>
+          </div>
+        </div>
+        <div
+          class="tablet:grid-col"
+        >
+          <div
+            class="usa-checkbox"
+          >
+            <input
+              class="usa-checkbox__input"
+              data-testid="colors-Blue"
+              disabled=""
+              id="colors-Blue"
+              name="colors"
+              type="checkbox"
+              value="Blue"
+            />
+            <label
+              class="usa-checkbox__label"
+              for="colors-Blue"
+            >
+              Blue
+            </label>
+          </div>
+        </div>
+      </div>
+    </fieldset>
+  </div>
+</div>
+`;