48

我正在尝试基于 Blazor中的Enable/Disable一组输入；虽然对于以下类型的解决方案有效，但对于类型的输入则无效：timecheckboxinputsbuttontime

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

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

PS：在第一种情况下，bool它是另一个参数，component所以我不绑定它。但是，在第二种情况下，它绑定到checkbox.

4

7 回答 7

102

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

我对您的代码进行了一些修改，这将满足您的需求。disabledBlazor 将根据值自动添加或删除属性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 类来设置禁用元素的样式。由你决定。

于 2019-03-05T12:19:51.773 回答
9

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

<input disabled="@(MyCondition ? true : false)" type="checkbox" />
于 2020-08-20T21:03:03.883 回答
6

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

<fieldset disabled=@ShouldBeDisabled>
  Your input controls in here will be disabled/enabled by the browser
</fieldset>
于 2020-05-26T14:08:11.490 回答
4

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

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

<input disabled=@(IsDisabled) ...

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

<input disabled="@(IsDisabled)" ...
于 2021-09-01T15:44:12.053 回答
1

参考上面的答案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) ...

于 2021-09-14T10:42:20.257 回答
0

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

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; }
于 2021-08-24T09:18:46.217 回答
-1

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

@if (IsDisabled)
{
    <input type="checkbox" @bind="Value" disabled />
}
else
{
    <input type="checkbox" @bind="Value" />
}
于 2021-02-25T14:53:14.930 回答