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

问题描述：

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

I am trying to Enable/Disable a group of time inputs in Blazor based on a checkbox ; while for inputs of type button the below solution works ,for inputs of type time it doesn't :

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

Solution for button input that works:

<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的参数来使用，因此我不绑定它.但是，在第二种情况下，它绑定到checkbox.

P.S.: In the first scenario the bool comes as a parameter from another component so I don't bind it. In the second case, however, it is bound to the checkbox.

答

要禁用元素，您应该使用禁用的属性.

To disable elements you should use the disabled attribute.

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

I've modified your code a bit and this will do what you're after. Blazor will automatically add or remove the disabled attribute based on the IsDisabled value.

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

You should use the disabled attribute on your button as well. It's a much better practice.

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

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

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

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

You can still combine this with applying a CSS class for styling the disabled element. It's up to you.

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

相关推荐