"仅读取"复选框仍可编辑

Question

我有一个复选框表(真/假值(，initialValues是从 api 调用填充的。每个"设施"都有Enabled和Immutable价值。如果Immutable为 true，则应选中 ANDreadOnlyEnabled复选框，这意味着它不能取消选中。因此，如果Immutable是false，则Enabled复选框应该是可编辑的。

我使用以下代码片段来呈现上述场景

<Table.Cell>
{JSON.stringify(enabled) === "true" &&
`facilities[${index}].immutable` ===
"true" ? (
<Field
type="checkbox"
name={`facilities[${index}].enabled`}
readOnly
/>
) : (
<>
<Field
type="checkbox"
name={`facilities[${index}].enabled`}
/>
</>
)}
</Table.Cell>

我这里有一个代码沙箱。您可以通过选中/取消选中沙盒中表下方处于调试状态的框来查看更新的值。

似乎条件总是假的，并且呈现非readOnly<Field />

Answer 1

试试这个：

<Table.Cell>
{JSON.stringify(enabled) === "true" &&
`facilities[${index}].immutable` ===
"true" ? (
<Field
type="checkbox"
name={`facilities[${index}].enabled`}
// readOnly
disabled
/>
) : (
<>
<Field
type="checkbox"
name={`facilities[${index}].enabled`}
/>
</>
)}
</Table.Cell>