How to apply JSON list formatting to display a choice (multi-selection) column with a check box next to each choice?

Jacob R 20 Reputation points
2023-02-13T23:05:25.5133333+00:00

I am using a choice (multi-selection) and a Yes/No column to achieve the functionality pictured below. However, I would like to be able to only check one of the boxes and have the strike-through be applied to the corresponding choice. I was only able to have all or none.

Here is the code I am using today

Yes/No - Formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "flex-start",
        "flex-wrap": "wrap",
        "margin": "5px 0px"
      },
      "children": [
        {
          "elmType": "div",
          "forEach": "choiceIterator in @currentField",
          "style": {
            "margin": "1px 0px",
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center"
          },
          "children": [
            {
              "elmType": "div",
              "txtContent": "[$choiceIterator]",
              "style": {
                "text-decoration": "=if([$Completed],'line-through','inherit')",
                "margin": "1.5px"
              },
              "attributes": {
                "class": "ms-fontColor-black"
              }
            }
          ]
        }
      ]
    }
  ]
}

Choice Column Formatting

{
  "$schema": "https://developer.microsoft.com/json-schemas/sp/v2/column-formatting.schema.json",
  "elmType": "div",
  "children": [
    {
      "elmType": "div",
      "style": {
        "display": "flex",
        "flex-direction": "column",
        "justify-content": "flex-start",
        "flex-wrap": "wrap",
        "margin": "5px 0px"
      },
      "children": [
        {
          "elmType": "div",
          "forEach": "choiceIterator in [$Tasks]",
          "style": {
            "margin": "3px 0px",
            "display": "flex",
            "flex-direction": "row",
            "align-items": "center",
            "cursor": "pointer"
          },
          "children": [
            {
              "elmType": "div",
              "style": {
                "margin-right": "5px",
                "padding-top": "3px"
              },
              "attributes": {
                "iconName": "=if(@currentField, 'CheckboxComposite','Checkbox')"
              },
              "customRowAction": {
                "action": "setValue",
                "actionInput": {
                  "Completed": "=if(@currentField , '0' , '1' )"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

2023-02-13_15-14-40

2023-02-13_15-14-01

SharePoint
SharePoint
A group of Microsoft Products and technologies used for sharing and managing content, knowledge, and applications.
10,249 questions
0 comments No comments
{count} votes