Question 413792 in Html Question posted in
Some basic documentation can be found here.

Html – Can we make a Mud Checkbox functionality work as a Radio functionality?

I want to change a functionality in a project of my company, but everything I have done until now have not helped me achieve it.
I am using Blazor and in the Razor part of the code I am using MudBlazor. Before the change I was using a normal HTML radio group, with 2 options "Yes" and "No".
We thought using Checkboxes instead of Radio would benefit the project visually more, so I made changes but there was one thing I couldn’t find out. "Mutually exclusive"…
I couldn’t make the Checkbox options, so when "Yes" was clicked the other one "No" coudn’t be checked at the same time as "Yes" but instead check "No" and empty "Yes" instead. Just like a radio functionality. But I couldn’t achieve it…

Razor part of code :

<div class="form-check form-check-inline me-4 radio-print">                           
<MudCheckBox Label="Ja" T="bool" Checked="@_yesChecked" CheckedChanged="OnYesCheckedChanged" Disabled="@IsReadOnly" />                        
</div>                           
<div class="form-check form-check-inline radio-print">                           
<MudCheckBox Label="Nein" T="bool" Checked="@_noChecked" CheckedChanged="OnNoCheckedChanged" Disabled="@IsReadOnly" />                         
</div>

The options are binded to one SQL Databank value, in which we have it coded in Request.cs code file in our /Shared project file.

Binded to :

public bool GxpRelevant { get; set; }

…

@code part of the Blazor page :

[Parameter]
public Request? Model { get; set; }
private bool _yesChecked;
private bool _noChecked;`

protected override void OnInitialized()
{
   _yesChecked = Model!.GxpRelevant;
   _noChecked = !Model!.GxpRelevant;
}

private void OnYesCheckedChanged(bool value)
{
   if (value)
   {
     _yesChecked = true;
     _noChecked = false;
   }
   else
   {
     _yesChecked = false;
   }
   Model!.GxpRelevant = _yesChecked;
   EvtChanged.InvokeAsync(Model);
}

private void OnNoCheckedChanged(bool value)
{
   if (value)
   {
     _noChecked = true;
     _yesChecked = false;
   }
   else
   {
     _noChecked = false;
   }
   Model!.GxpRelevant = !_noChecked;
   EvtChanged.InvokeAsync(Model);
}

I also saw similar solutions in different AI generated codes, and they pretty much gave the same type of code, and I still couldn’t make the options of the checkbox mutually exclusive.
Anyone has had this type of experience before?
I am only a Junior Software Engineer, so I am not very experienced myself…
I would gladly appreciate the help.

Tags:

2

Answers


  1. 0

    Based on the code provided, your solution should work. You haven’t stated what version of MudBlazor you’re using though. If it’s v7, change Checked and CheckedChanged to Value and ValueChanged and that should fix your problem.

    Login or Signup to reply.
  2. 0

    Just remind that you only need 1 bool parameter for this mutually exclusive..

    <div class="form-check form-check-inline me-4 radio-print">
    <MudCheckBox Label="Ja" T="bool" Value="@_yesChecked" ValueChanged="OnYesCheckedChanged" />
</div>
<div class="form-check form-check-inline radio-print">
    <MudCheckBox Label="Nein" T="bool" Value="@(!_yesChecked)" ValueChanged="OnNoCheckedChanged" />
</div>

@code {
    private bool _yesChecked;

    private void OnYesCheckedChanged(bool value)
    {
        if (value){_yesChecked = true;}

        //Model!.GxpRelevant = _yesChecked;
    }
    private void OnNoCheckedChanged(bool value)
    {
        if (value){ _yesChecked = false;}
        //Model!.GxpRelevant = _yesChecked;
    }
}
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search