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

Posted 2023-02-22

【中文标题】如何在 blazor 中启用/禁用输入

【英文标题】：How to enable/disable inputs in blazor

【发布时间】：2019-07-26 21:40:29

【问题描述】：

我正在尝试基于 checkbox 在 Blazor 中 Enable/Disable 一组 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。

【参考方案1】：

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

我已经稍微修改了您的代码，这将满足您的需求。 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 类来设置禁用元素的样式。这取决于你。

【讨论】：

是的，Blazor 使 disabled="false" 消失。需要一点时间来适应。

这个答案当然是正确的——我只是想指出，使用禁用属性不是防止表单数据被编辑或保存的安全方法，因为用户可以轻松修改 html 客户端以删除禁用属性然后修改字段

@GregH 是正确的，您应该将控件呈现为不可编辑的元素，如果它被禁用，就像标签一样，这将防止客户端摆弄。

@Sergey 已修复。只是对于任何未来的读者来说，是否在属性中的变量周围使用引号实际上并不重要。您不是在编写 HTML 它的 Razor。所以disabled="@IsDisabled" 和disabled=@IsDisabled 都是完全有效的。

@Uxonith Disabled 仅在元素执行可以禁用的操作（例如单击）时才有效。 li 没有动作功能，它们只是一种显示方式。我会在你的 li 中放一个按钮并删除 OnClick。为了可访问性等原因，最好不要乱用 HTML 语义。

【参考方案2】：

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

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

【讨论】：

true : false 的目的是什么？这不就是 MyCondition 的价值吗？

赞成，因为这与接受的答案一样有效，赞成票是 17 倍。

是的，我不明白三元运算符的意义。只需@MyCondition 就可以了。

【参考方案3】：

您可以通过另一种方法来实现这一目标。

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

【参考方案4】：

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

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

<input disabled=@(IsDisabled) ...

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

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

【参考方案5】：

参考上面的答案a) Without Quotes

<input disabled=@(IsDisabled) ...

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

这通过添加!IsDisabled来解决

Blazor Input Control

HTML Input Control

【参考方案6】：

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

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; 

【参考方案7】：

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

@if (IsDisabled)

    <input type="checkbox" @bind="Value" disabled />

else

    <input type="checkbox" @bind="Value" />

【讨论】：

应该是@bind = "IsDisabled"