RE: SFCheckboxes Blazor - Toggle Values

[Peter Cox]

Hi guys,

First of all I love the Blazor product, especially as its free for smaller developers - its been a big help, and I hope to give you some cash some day for your hard work when I'm more established.

Anyway,

I want a series of checkboxes that basically behave like a radio control e.g. only 1 can be selected. If clicking the one that is selected, nothing should happen.

Please see the attached gif for exactly what I'm trying to achieve

Hope this gives you guys enough information to help

Thanks Pete

Attachment: togglecheckboxdemo_e05ce27f.7z

[Saranya Dhayalan]

Hi Peter, 

 

Thank you for contacting Syncfusion support 

 

We have checked your reported query, you can achieve this by using ValueChange event and two binding support. Please find the below code snippet: 

 

@using Syncfusion.Blazor.Buttons 

 

    <div class="control-section"> 

        <div class="checkbox-control"> 

            <div class="row"> 

                <SfCheckBox @ref="CheckBox1" @bind-Checked="@chkbox1" Label="CheckBox1" ValueChange="valueChange"></SfCheckBox> 

            </div> 

            <div class="row"> 

                <SfCheckBox @ref="CheckBox2" @bind-Checked="@chkbox2" Label="CheckBox2" ValueChange="valueChange"></SfCheckBox> 

            </div> 

            <div class="row"> 

                <SfCheckBox @ref="CheckBox3" @bind-Checked="@chkbox3" Label="CheckBox3" ValueChange="valueChange"></SfCheckBox> 

            </div> 

        </div> 

    </div> 

 

@code{ 

 

    SfCheckBox CheckBox1; 

    SfCheckBox CheckBox2; 

    SfCheckBox CheckBox3; 

 

    public bool chkbox1 { get; set; } 

    public bool chkbox2 { get; set; } 

    public bool chkbox3 { get; set; } 

    public void valueChange(Syncfusion.Blazor.Buttons.ChangeEventArgs args) 

    { 

        if(CheckBox1.Checked == true) 

        { 

            chkbox2 = false; 

            chkbox3 = false; 

        } 

        if(CheckBox2.Checked == true) 

        { 

            chkbox1 = false; 

            chkbox3 = false; 

        } 

        if(CheckBox3.Checked == true) 

        { 

            chkbox1 = false; 

            chkbox2 = false; 

        } 

    } 

} 

<style> 

    .checkbox-control { 

        margin: 12% 0 12% 40%; 

    } 

 

    @@media only screen and (max-width: 700px) { 

        .checkbox-control { 

            margin: 20% 0 0 32%; 

        } 

 

        .control-section { 

            min-height: 200px; 

        } 

    } 

 

    @@media only screen and (max-width: 500px) { 

        .control-section { 

            min-height: 200px; 

        } 

 

        .checkbox-control { 

            margin-top: 27%; 

            margin-left: 20%; 

            margin-bottom: 27%; 

        } 

    } 

 

    .control-section .row { 

        margin: 20px 0; 

    } 

</style> 

 

Please check the above code snippet and get back to us if you need further assistance on this. 

 

Regards, 

Saranya D