html - 如何在 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" : "";
}

P.S.:在第一种情况下 bool来自另一个 component 的参数所以我不绑定(bind)它。然而，在第二种情况下，它绑定(bind)到 checkbox。 .

Answer 1

要禁用元素，您应该使用 disabled attribute .
我对您的代码进行了一些修改，这将满足您的需求。 Blazor 将自动添加或删除 disabled基于 IsDisabled 的属性值(value)。
您也应该在按钮上使用 disabled 属性。这是一个更好的做法。

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

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

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

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