如何在 Blazor 中启用/禁用输入

Question

我正在尝试 Enable/Disable 一组 time Blazor 中基于 checkbox 的输入；而对于 inputs 类型 button 下面的解决方案有效，对于类型 time 它不适用：

按钮输入有效的解决方案：

 <button type="button" class="@this.SetButton"></button>

[Parameter] public bool state { get; set; }

public string SetButton() {
    string result = state ? "" : "disabled";
    return result;
}

尝试输入无效的时间：

 <input bind="@IsDisabled" type="checkbox" />
<input class="@this.GetGroupState()" type="time" />

protected bool IsDisabled { get; set; }

public string GetGroupState() {
    return this.IsDisabled ? "disabled" : "";
}

PS：在第一个场景中 bool 作为参数来自另一个 component 所以我不绑定它。然而，在第二种情况下，它绑定到 checkbox 。

原文由 Bercovici Adrian 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

要禁用元素，您应该使用 disabled 属性。

我已经稍微修改了您的代码，这将满足您的要求。 Blazor 将根据 IsDisabled 值自动添加或删除 disabled 属性。

您还应该在按钮上使用 disabled 属性。这是一个更好的做法。

 <button type="button" disabled="@IsDisabled"></button>
<input @bind="IsDisabled" type="checkbox" />

<input disabled="@IsDisabled" type="time" />

@code{
    protected bool IsDisabled { get; set; }
}

您仍然可以将其与应用 CSS 类结合使用来为禁用元素设置样式。由你决定。

原文由 Chris Sainty 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 2

有另一种方法可以实现此目的。

 <fieldset disabled=@ShouldBeDisabled>
  Your input controls in here will be disabled/enabled by the browser
</fieldset>

原文由 Peter Morris 发布，翻译遵循 CC BY-SA 4.0 许可协议