Estoy tratando de Enable/Disable un grupo de entradas de time en Blazor en función de una checkbox de verificación; mientras que para las inputs de tipo button , la siguiente solución funciona, para las entradas de tipo time no funciona:
Solución para la entrada de botón que funciona:
<button type="button" class="@this.SetButton"></button> [Parameter] public bool state { get; set; } public string SetButton() { string result = state ? "" : "disabled"; return result; }Intento de entradas de tiempo que no funciona:
<input bind="@IsDisabled" type="checkbox" /> <input class="@this.GetGroupState()" type="time" /> protected bool IsDisabled { get; set; } public string GetGroupState() { return this.IsDisabled ? "disabled" : ""; } PD: En el primer escenario, el bool viene como un parámetro de otro component así que no lo vinculo. En el segundo caso, sin embargo, está vinculado a la checkbox de verificación.
Hay una forma alternativa de lograr esto.
<fieldset disabled=@ShouldBeDisabled> Your input controls in here will be disabled/enabled by the browser </fieldset>También puede obtener el valor para deshabilitar el botón directamente como una expresión
<input disabled="@(MyCondition ? true : false)" type="checkbox" />Para deshabilitar elementos, debe usar el atributo disabled .
Modifiqué un poco tu código y esto hará lo que buscas. Blazor agregará o eliminará automáticamente el atributo disabled en función del valor IsDisabled .
También debe usar el atributo deshabilitado en su botón. Es una práctica mucho mejor.
<button type="button" disabled="@IsDisabled"></button> <input @bind="IsDisabled" type="checkbox" /> <input disabled="@IsDisabled" type="time" /> @code{ protected bool IsDisabled { get; set; } }Todavía puede combinar esto con la aplicación de una clase CSS para diseñar el elemento deshabilitado. Tu decides.
Blazor hace que disabled="false" desaparezca. ¡Esta afirmación no es cierta! La única forma es usar una declaración if como esta.
@if (IsDisabled) { <input type="checkbox" @bind="Value" disabled /> } else { <input type="checkbox" @bind="Value" /> }He simplificado el código completo - ¡Funcionando!
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; }Las comillas pueden marcar la diferencia, o al menos durante la representación previa del servidor:
a) Sin comillas: el parámetro de desactivación se eliminará cuando se evalúe como falso. Esto funcionará como se esperaba:
<input disabled=@(IsDisabled) ... b) Con comillas: agregará un valor de "Verdadero" o "Falso" al parámetro, por ejemplo. disabled="True" o disabled="False" . Permanecerá deshabilitado ya que el navegador está buscando el parámetro en lugar de un valor.
<input disabled="@(IsDisabled)" ...Con la referencia de la respuesta anterior a) Without Quotes
<input disabled=@(IsDisabled) ... En caso de que establezca IsDisabled en true , la línea anterior no deshabilitará la entrada
Esto se resuelve agregando !IsDisabled
Blazor Input Control<InputText @bind-Value="UserModel.UserName" id="userName" class="form-control" disabled=@(!IsDisabled) />
HTML Input Control<entrada deshabilitada=@(!IsDisabled) ...