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

Question

我正在尝试基于Blazor在Blazor中进行Enable/Disable一组time输入checkbox；对于inputs类型button，以下解决方案有效，对于类型的输入time则无效：

有效的按钮输入解决方案

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

[Parameter] public bool state{get;set;} 
public string SetButton() {
       string result = state == true ? "" : "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

Answer 1

引号可以发挥重要作用，或者至少在服务器预渲染期间：

a) 不带引号 - 当禁用参数评估为 false 时，该参数将被删除。这将按预期工作：

<input disabled=@(IsDisabled) ...

b) 带引号 - 它将向参数添加“True”或“False”值，例如。disabled="True"或者disabled="False"。当浏览器正在寻找参数而不是值时，它将保持禁用状态。

<input disabled="@(IsDisabled)" ... 

Answer 2

您可以通过另一种方法来实现此目的。

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

Answer 3

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

我对您的代码做了一些修改，这将满足您的要求。Blazor将disabled基于该IsDisabled值自动添加或删除属性。

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

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

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

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

您仍然可以将其与应用CSS类以对禁用元素进行样式化结合起来。由你决定。

Answer 4

也可以直接获取禁用按钮的值作为表达式

<input disabled="@(MyCondition ? true : false)" type="checkbox" />