So aktivieren / deaktivieren Sie Eingaben in Blazor

ich versuche zu Enable/Disable eine Gruppe von time Eingaben in Blazor basierend auf a checkbox ; während für inputs des Typs button Die folgende Lösung funktioniert für Eingaben des Typs time es geht nicht:

Lösung für Tasteneingabe, die funktioniert:

<button type="button" class="@this.SetButton"></button>

[Parameter] public bool state { get; set; }

public string SetButton() {
    string result = state ? "" : "disabled";
    return result;
}

Versuch für Zeiteingaben, die nicht funktionieren:

<input bind="@IsDisabled" type="checkbox" />                      
<input class="@this.GetGroupState()" type="time" />

protected bool IsDisabled { get; set; }

public string GetGroupState() {
    return this.IsDisabled ? "disabled" : "";
}

PS: Im ersten Szenario die bool kommt als Parameter von einem anderen component also binde ich es nicht. Im zweiten Fall ist es jedoch an die gebunden checkbox.

Um Elemente zu deaktivieren, sollten Sie die verwenden deaktiviertes Attribut.

Ich habe Ihren Code ein wenig modifiziert und das wird tun, was Sie suchen. Blazor fügt die automatisch hinzu oder entfernt sie disabled Attribut basierend auf der IsDisabled Wert.

Sie sollten das deaktivierte Attribut auch auf Ihrer Schaltfläche verwenden. Es ist eine viel bessere Praxis.

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

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

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

Sie können dies immer noch mit dem Anwenden einer CSS-Klasse zum Gestalten des deaktivierten Elements kombinieren. Es liegt an dir.

Sie können den Wert zum Deaktivieren der Schaltfläche auch direkt als Ausdruck abrufen

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

Es gibt einen alternativen Weg, wie Sie dies erreichen können.

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

Zitate können den Unterschied ausmachen, oder zumindest während des Server-Prerenderings:

a) Ohne Anführungszeichen – Der Deaktivierungsparameter wird entfernt, wenn er als „false“ ausgewertet wird. Dies wird wie erwartet funktionieren:

<input disabled=@(IsDisabled) ...

b) Mit Anführungszeichen – Es fügt dem Parameter einen Wert von “Wahr” oder “Falsch” hinzu, z. disabled="True" oder disabled="False". Es bleibt deaktiviert, da der Browser eher nach dem Parameter als nach einem Wert sucht.

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

Mit dem Hinweis auf die obige Antwort a) Without Quotes

<input disabled=@(IsDisabled) ...

Falls Sie eingestellt haben IsDisabled zu truewird die obige Zeile die Eingabe nicht deaktivieren

Dies löst sich durch Hinzufügen !IsDisabled

Blazor Input Control

HTML Input Control

Ich habe den kompletten Code vereinfacht – Funktioniert!

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

HTML-Deaktivierungseigenschaft kann den Wert „true“ oder „false“ nicht erhalten. Der einzige Weg ist, es hinzuzufügen oder nicht: https://www.w3schools.com/tags/att_input_disabled.asp