disable row of radio buttons in a table

Question

I have a table of radio buttons as shown in the below picture. I need to disable the entire row of the checked radio button except the checked radio button of the same row. In the sub-table of the radio buttons, i indicates rows, and j indicates columns and an array(checkedRadioBtn) is used to track the checked radio buttons. In checkedRadioBtn = [3,2] where indexes are columns and values are rows and rows are fixed to 4 but columns are dynamic. I actually came up with the 2 solutions which are working partially.

• <input type="radio" [disabled]="checkedRadioBtn[i] == i && checkedRadioBtn[j] !== i"> this becomes invalid on chekedRadioBtn 3 where are less columns

• <input type="radio" [disabled]="checkedRadioBtn[i % columns.length] == i && checkedRadioBtn[j] !== i">

what I need is just the logic that goes inside [disabled] or any other way to achieve the above-mentioned problem and follow this link and take that test(check answering feature) and it has the exact answering feature that I am trying to implement. any help is very much appreciated. thank you. stackblitz sample demo

Answer 1

You can follow this demo at StackBlitz which is my answer to a similar question.

Result:

So, you can see after selecting one radio button from a row immediately disables the row.

Edit:

As per requirement, check the demo at StackBlitz .

New result:

Answer 2

It is not a mandatory field. The radio button helps in ensuring only one option is selected. However, it doesn't allow users to deselect the option. If you want to implement it with Radio buttons then you can add another radio button that has a value of None this may also resolve your issue.

Answer 3

<input type="radio" [disabled]="checkedRadioBtn.indexOf(i) > -1 && checkedRadioBtn.indexOf(i) != j"> this logic worked for me