Unchecked checkboxes if one checkbox is checked

General
1

How can I uncheck box 1, box 2 and box 3 if request A is checked. I tried the if-then method on it to uncheck box 1 and 2 if request A is unchecked, nothing happened

Initial state
image

  1. User select Request A
    image

  2. User select Box 1 and box 2
    image

  3. User decide not to go with Request A and unchecked it.
    image

  4. Upon form submission, box 1 and 2 is still checked.
    image

schema.json

{
  "type": "object",
  "properties": {    
"checkboxes": {
      "title": "Select Option",
      "type": "object",
      "properties": {
        "requestA": {
          "type": "boolean"
        },
        "box1": {
          "type": "boolean"
        },
        "box2": {
          "type": "boolean"
        },
        "box3": {
          "type": "boolean"
        }
      },
        "if": {
          "properties": {
            "requestA": {
              "const": false
            }
          }
        },
        "then": {
          "properties": {
            "box1": {
              "const": false
            }
          }
        }
    }
  }
}

uiSchema.json

    {
      "type": "Group",
      "label": "Form",
      "elements": [
        {
          "type": "VerticalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": "#/properties/checkboxes/properties/requestA"
            },
            {
              "type": "VerticalLayout",
              "elements": [
                {
                  "type": "Control",
                  "scope": "#/properties/checkboxes/properties/box1"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/checkboxes/properties/box2"
                },
                {
                  "type": "Control",
                  "scope": "#/properties/checkboxes/properties/box3"
                }
              ],
              "rule": {
                "effect": "SHOW",
                "condition": {
                  "scope": "#properties/checkboxes/properties/requestA",
                  "schema": {
                    "const": true
                  }
                }
              }
            }
          ]
        }
      ]
    }
2

Hi @newbieJson,

JSON Schema “rules” (i.e. the if/then) only affect validation results and do not modify data. UI Schema rules only apply visually and do not affect the stored data. In most use cases this is what’s most practical as the user otherwise loses all their previously input and selected options just by triggering a SHOW/HIDE rule somewhere.

If you want to dynamically adjust data of other fields when a value is changed then you need to do this either via custom renderers or by listening to data changes and modifying the data before handing it back to JSON Forms.