防止复选框（或 InputCheckBox）被取消选中 - Blazor答案

【问题标题】：Prevent checkbox (or InputCheckBox) to be unchecked - Blazor防止复选框（或 InputCheckBox）被取消选中 - Blazor
【发布时间】：2022-03-16 04:39:35
【问题描述】：

我将我的问题提取到了简单的代码中，但它并没有按预期工作：

<input type="checkbox" checked=@Visible  @onchange="args=> {Visible=true;}"/>

@code
{
 public bool Visible { get; set; } = true;
}

(Available online)

出于某种原因，我希望复选框保持选中状态，即使我单击它（取消选中它）。即使使用 StateHasChanged() 或 InputCheckBox 元素，我也无法弄清楚。

这听起来可能很愚蠢，但正如我所说，它是从复杂代码中提取的代码，这是有道理的。禁用复选框不是这里的解决方案。

【问题讨论】：

禁用有什么区别？功能性还是化妆品？
功能。我需要信息，它本来是要改变的。但是，是的，我可以以某种方式禁用。但更重要的是理解为什么这不起作用..

标签： c# blazor

【解决方案1】：

请参阅Reset input field value if value is invalid in Blazor，了解我不久前回答的一个非常相似的问题的详细解释。

Renderer 持有的 DOM 基本上是这样的：

<input type="checkbox" checked ....>

当您取消单击该复选框时，实际的浏览器 DOM 现在与渲染器 DOM 不同步。 onchange 事件被触发，新值被传递给ChangeEventArgs 中的事件。它仍然在 Renderer DOM 中被选中，尽管在 Browser DOM 中未被选中。然后将其设置为下一次渲染：

<input type="checkbox" checked ....>

渲染器 DOM 没有发现任何差异，因此不会向浏览器发送更新。下面的代码通过将 Browser DOM 设置为 unchecked 状态来强制进行更改，然后再恢复到正确的状态。

<div class="container">
    <div class="col p-2 m-2">
        <input type="checkbox" checked=@Visible @onchange="OnChangeCheck" />
    </div>
    <div class="col p-2 m-2">
        <input type="checkbox" checked=@Visible @onchange="OnChangeCheck1" />
    </div>
</div>
    public bool Visible { get; set; } = true;

    async Task OnChangeCheck(ChangeEventArgs e)
    {
        Visible = false;
        await Task.Yield();
        Visible = true;
    }

    async Task OnChangeCheck1(ChangeEventArgs e)
    {
        Visible = true;
    }

【讨论】：

有“不必要的”收益很奇怪。但它有效。谢谢你的解释！
没有必要。检查codeproject.com/Articles/5310624/Blazor-UI-Events-and-Rendering，它解释了渲染过程。有了它，Blazor 事件处理程序可以执行双重渲染操作，并且渲染器获得同步线程时间来服务渲染队列。没有它，您只会在 OnChangeCheck 完成时获得一个渲染事件 - 整个序列是同步的，并且渲染器没有线程时间来服务渲染队列上的任何 StateHasChanged 请求，直到它完成。
答案中演示的代码假定“可见”属性保持同步到客户端状态。如果不是将 Visible 设置为 false 或 true，而是将其设置为 (bool)args.Value，则可能会提高代码的可读性和稳健性，因为这是从浏览器事件接收到的值。这样做可以确保在调用 Task.Yield() 之前将服务器 DOM 同步到浏览器中显示的内容。
还有助于提高可读性，因为它更好地表达了代码意图。
@JamesHoux - 我同意。我已经更新了答案;-)

【解决方案2】：

如果您添加另一个隐藏字段，其值要绑定到字段模型，则更简单。然后可以禁用该复选框，因为您不需要该值。

【讨论】：