如何 enable/disable 在 blazor 中输入

Question

我正在尝试 Enable/Disable Blazor 中基于 checkbox 的一组 time 输入；而对于 button 类型的 inputs 以下解决方案有效，对于 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，所以我不绑定它。然而，在第二种情况下，它绑定到 checkbox.

Answer 1

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

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

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

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

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

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

您仍然可以将此与应用 CSS class 结合使用，以设置禁用元素的样式。由你决定。

Answer 2

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

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

Answer 3

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

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

Answer 4

Blazor 使 disabled="false" 消失。这种说法是不正确的！唯一的方法是像这样使用 if 语句。

@if (IsDisabled)
{
    <input type="checkbox" @bind="Value" disabled />
}
else
{
    <input type="checkbox" @bind="Value" />
}

Answer 5

我已经简化了完整的代码 - 工作！

Test Cases:
By default checkbox is unchecked, and submit button is disabled.
When checkbox checked, submit button enabled
When checkbox un-checked, submit button disabled

<div class="card">
    <div class="card-header">Final Submission</div>
    <div class="card-body">

        <div class="form-check">
            <input id="xbrlfinal" class="form-check-input" type="checkbox" bind="@IsAcknowledged" 
            @onchange="@((args) => IsAcknowledged = (bool)args.Value)">
            <label class="form-check-label" for="flexCheckDefault">
                I hereby declare that I have checked and verified.
            </label>
        </div>

    </div> <!-- Main Card body ends -->
    <div class="card-footer text-muted">
        <div class="d-grid gap-2 d-md-flex justify-content-md-end">
            <button type="submit" class="btn btn-primary me-md-3" @onclick="OnSubmissionProcess" disabled="@(IsAcknowledged?false:true)">Process</button>

        </div>
    </div>
</div> <!-- Main Card ends -->

 protected bool IsAcknowledged { get; set; }

Answer 6

报价可以发挥重要作用，或者至少在服务器预呈现期间：

a) 不带引号 - disable 参数在评估为 false 时将被删除。这将按预期工作：

<input disabled=@(IsDisabled) ...

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

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

Answer 7

参考以上答案a) Without Quotes

<input disabled=@(IsDisabled) ...

如果您将 IsDisabled 设置为 true，以上行将不会禁用输入

这通过添加 !IsDisabled

来解决

Blazor Input Control

HTML Input Control

<输入禁用=@(!IsDisabled) ...

Answer 8

HTML 已禁用属性无法获取值 true 或 false。唯一的方法是添加或不添加：https://www.w3schools.com/tags/att_input_disabled.asp

如何 enable/disable 在 blazor 中输入

How to enable/disable inputs in blazor

html

blazor

disabled-input