So aktivieren / deaktivieren Sie Eingaben in Blazor

Lesezeit: 3 Minuten

Benutzer-Avatar
Bercovici Adrian

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.

Benutzer-Avatar
Chris Sainty

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.

  • Ja, Blazor macht disabled="false" verschwinden. Etwas gewöhnungsbedürftig.

    – Henk Holtermann

    5. März 2019 um 12:35 Uhr

  • Diese Antwort ist sicherlich richtig. Ich möchte nur darauf hinweisen, dass die Verwendung deaktivierter Attribute kein sicherer Weg ist, um zu verhindern, dass Formulardaten bearbeitet oder gespeichert werden, da Benutzer die HTML-Clientseite einfach ändern können, um das deaktivierte Attribut zu entfernen und dann das Feld zu ändern

    – GregH

    5. März 2019 um 16:50 Uhr

  • @GregH ist richtig, Sie sollten Ihr Steuerelement als nicht bearbeitbares Element darstellen, z. B. ein Etikett, wenn es deaktiviert ist. Dies verhindert das Fummeln auf Clientseite.

    – Herr Magoo

    6. März 2019 um 10:58 Uhr

  • @Sergey Behoben. Nur für alle zukünftigen Leser, es spielt eigentlich keine Rolle, ob Sie Variablen in Attributen in Anführungszeichen setzen oder nicht. Du schreibst nicht HTML, sondern Razor. So disabled="@IsDisabled" und [email protected] sind beide vollkommen gültig.

    – Chris Sainty

    26. März 2019 um 9:50 Uhr

  • @Uxonith Disabled funktioniert nur, wenn das Element etwas tut, das deaktiviert werden kann, z. B. ein Klick. Li’s haben keine Aktionsfunktion, sie sind nur eine Möglichkeit, etwas anzuzeigen. Ich würde einen Knopf in Ihr li setzen und den OnClick entfernen. Es ist am besten, aus Gründen der Zugänglichkeit und dergleichen nicht mit der HTML-Semantik herumzuspielen.

    – Chris Sainty

    1. April 2020 um 17:19 Uhr

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

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

  • Was ist der Zweck von true : false? Ist das nicht der Wert von MyCondition?

    – Jonas

    23. Juli 2021 um 7:30 Uhr

  • Upvoting, weil dies genauso gültig ist wie die akzeptierte Antwort, die 17-mal so viele positive Stimmen hat.

    – Jason

    26. August 2021 um 0:28 Uhr

  • Ja, ich verstehe den Sinn des ternären Operators nicht. Gerade @MyCondition sollte gut sein.

    – Bennyboy1973

    14. September 2021 um 10:49 Uhr

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

<fieldset [email protected]>
  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 [email protected](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 [email protected](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

Benutzer-Avatar
Arjun

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

Benutzer-Avatar
Sebastian4615

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

1284170cookie-checkSo aktivieren / deaktivieren Sie Eingaben in Blazor

This website is using cookies to improve the user-friendliness. You agree by using the website further.

Privacy policy