How to use json formatting for multi-selection choice column in sharepoint?

Question

I would like to format a choice column (Multi-Selection) to have checkboxes next to each choice that allows users to "check" the box and apply a strikethrough on the corresponding choice. Currently, I am using a choice field (multi-selection) and a Yes/No column to achieve the functionality below. However, I am only able to have all selected or none selected for the strikethrough. I have provided screen shots and the code used. Thank!

Yes/No JSON

{
  "$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' )"
                }
              }
            }
          ]
        }
      ]
    }
  ]
}

Choice column JSON

{
  "$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"
              }
            }
          ]
        }
      ]
    }
  ]
}

Answer 1

Hi @Jacob R,

Unfortunate though it is, I'm afraid it cannot be achieved using JSON formatting. A field of the Yes/No column "Completed" will only have one value, either Yes or No, there will not be multiple values in a Yes/No field. So, it is impossible to maintain a one-to-one correspondence with the multi-selection choice field within an item. In this case, probably some 3rd party or custom SPFX solutions may meet this requirement as an alternative.

---

If the answer is helpful, please click "Accept Answer" and kindly upvote it. If you have extra questions about this answer, please click "Comment".

Note: Please follow the steps in our documentation to enable e-mail notifications if you want to receive the related email notification for this thread.