代码之家 › 专栏 › 技术社区 › Bercovici Adrian

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

blazor disabled-input html5

Bercovici Adrian · 技术社区 · 6 年前

我正在努力 Enable/Disable 一群 time Blazor中基于 checkbox ; 而 inputs 类型 button 以下解决方案适用于以下类型的输入: 时间 它没有:

适用于按钮输入的解决方案:

<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" : "";
}

附言:在第一个场景中 bool 作为参数来自另一个 component 所以我不绑它。然而,在第二种情况下,它与 复选框 .

1 回复 | 直到 4 年前

101

Chris Sainty 3 年前

要禁用元素,应使用 disabled attribute .

我对你的代码做了一些修改,这将满足你的要求。Blazor将自动添加或删除 disabled 基于 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类来设置禁用元素的样式相结合。这取决于你。

Mteheran 4 年前

还可以获取值,将按钮直接作为表达式禁用

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

Peter Morris 4 年前

有另一种方法可以实现这一点。

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

Matthew 3 年前

引号可以带来所有的不同,或者至少在服务器预渲染期间:

a) 不带引号-禁用参数在计算为false时将被删除。这将如预期的那样起作用:

<input disabled=@(IsDisabled) ...

b) 带引号-它将向参数eg添加一个“真”或“假”值。 disabled="True" 或 disabled="False" 。当浏览器正在搜索参数而不是值时,它将保持禁用状态。

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

Arjun 3 年前

参考上述答案 a) Without Quotes

<input disabled=@(IsDisabled) ...

以防万一 IsDisabled 到 true ,上述行不会禁用输入

这可以通过添加 !IsDisabled

Blazor Input Control

<InputText@bind Value=“UserModel.UserName”id=“UserName”class=“form control”disabled=@(!IsDisabled)/>

HTML Input Control

<输入已禁用=@(!IsDisabled)。。。

Arjun 3 年前

我简化了完整的代码-工作!

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; }

-1

Vesko I 4 年前

Blazor使disabled=“false”消失。这句话不是真的!唯一的方法是像这样使用if语句。

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