CODEWITHSUNDEEP
javascriptaurelia
user2771134
user2771134

Reputation: 63

How to bind back boolean value to radio button using Aurelia

In my scenario, I have to bind boolean value that I get from database on the page load to a set of radio buttons. If the value of the property is true, the radio button should be checked. The component html looks like below

<template>
<div repeat.for="option of question.Options" class="row">
    <template if.bind="question.QuestionTypeID == 2">
        <div class="col-lg-1 col-md-1 col-sm-1 col-xs-1" style="text-align: right;padding-right:0px;">
            <input type="radio" name="${option.QuestionID}" id="${option.OptionID}" model.bind="option.Response"  checked.bind="option.Response" click.delegate="OptionUpdate($event.target)" />
        </div>
    </template>
    <div class="col-lg-11 col-md-11 col-sm-11  col-xs-11">
        <label for="${option.OptionID}" innerhtml.bind="option.OptionDesc">
        </label>
    </div>
</div>

I have the boolean value to be bound in option.Response The click.delegate method looks like below

OptionUpdate(element)
{
    for(let option in this.question.Options)
    {
        if(element.id == this.question.Options[option].OptionID && element.checked)
        {
            this.question.Options[option].Response = this.question.Options[option].OptionID;
        }
        else{
            this.question.Options[option].Response = undefined;
        }
    }
    return element.checked;
}

Even if the option.Response property is true, some other radio button is getting checked.

Thanks in advance

Upvotes: 3

Views: 738

Answers (1)

LStarky
LStarky

Reputation: 2777

You don't need OptionUpdate. It's much simpler. I've created a GistRun to help you with Radio Boxes from a data object from a database:

https://gist.run/?id=de0a9a277ddbaf6ff39331f3fc61cfe1

Upvotes: 1

Related Questions