Radio Button do not work for bool value.

3,228 views
Skip to first unread message

rjdm...@gmail.com

unread,
Sep 20, 2011, 6:25:43 AM9/20/11
to KnockoutJS
I want to add radio button with bool value true and false but not
working with knoutout

My Code:-
<script>
var jsonFromServer= {
"Title": "Test with bool value.",
"GeneratePolicyNumber": true
};


var viewModel = ko.mapping.fromJS(jsonFromServer);

ko.applyBindings(viewModel);
</script>
<div>
<h1 data-bind="text: Title"></h1>
<p data-bind="text: GeneratePolicyNumber"></p>
<input type="radio" name="GeneratePolicyNumber" value="true" data-
bind="checked: GeneratePolicyNumber" />Yes
<input type="radio" name="GeneratePolicyNumber" value="false" data-
bind="GeneratePolicyNumber" />No
</div>

but do not work


Thank you.

Mark Hahn

unread,
Sep 20, 2011, 3:28:33 PM9/20/11
to knock...@googlegroups.com
Did you get a parse error in the log?  Your last line is not legal syntax ...

data-bind="GeneratePolicyNumber"

rjdm...@gmail.com

unread,
Sep 22, 2011, 2:08:29 AM9/22/11
to KnockoutJS
ok i have corrected my code but that is not working

<div>
<h1 data-bind="text: Title"></h1>
<p data-bind="text: GeneratePolicyNumber"></p>
<input type="radio" name="GeneratePolicyNumber" value="true" data-
bind="checked: GeneratePolicyNumber" />Yes
<input type="radio" name="GeneratePolicyNumber" value="false" data-
bind="checked: GeneratePolicyNumber" />No
</div>


see my code http://jsfiddle.net/cctaV/

thanks

Mark Hahn

unread,
Sep 22, 2011, 2:39:57 AM9/22/11
to knock...@googlegroups.com
FYI: Your last bind should look like ...

     data-bind="checked: !GeneratePolicyNumber()"

But the radio buttons still don't work.  Looks like a KO bug to me. When I changed the input type from radio to checkbox it worked.

Mickey

unread,
Sep 22, 2011, 2:45:28 AM9/22/11
to knock...@googlegroups.com
Hi!

It seemed strange to me, but after reading some docs here is what I found:

For radio buttons, KO will set the element to be checked if and only if the parameter value equals the radio button node’s value attribute. So, your parameter value should be a string.

This means that you should set:

var 
jsonFromServer{
    "Title""Test with bool value.",
    "GeneratePolicyNumber""true"
};

"true" - must be a string ( example: http://jsfiddle.net/mickeyvip/cctaV/3/ )
 

rjdm...@gmail.com

unread,
Sep 22, 2011, 2:49:29 AM9/22/11
to KnockoutJS
KO radio button work fine for string but i want for Boolean value and
it do not work.
need to come out with proper solution


thanks

rjdm...@gmail.com

unread,
Sep 22, 2011, 3:06:10 AM9/22/11
to KnockoutJS

Mark Hahn

unread,
Sep 22, 2011, 1:12:00 PM9/22/11
to knock...@googlegroups.com
For now you can do 

    data-bind="checked: ''+ GeneratePolicyNumber()"

rjdm...@gmail.com

unread,
Sep 23, 2011, 6:40:33 AM9/23/11
to KnockoutJS

Mickey

unread,
Sep 23, 2011, 6:11:03 PM9/23/11
to knock...@googlegroups.com
Why not use a checkbox? It binds to boolean.

gaffe

unread,
Sep 23, 2011, 6:18:39 PM9/23/11
to KnockoutJS
Sorry what part of this does not work?

I'd try making the things in your viewmodel observables, and I find
that sometimes knockout works best with tags like:
<select data-bind=""></select> but does NOT work with <select data-
bind=""/> for some reason, perhaps that will help.

Your example seems to work for me though...

On Sep 23, 6:40 am, "rjdme...@gmail.com" <rjdme...@gmail.com> wrote:
> :-(  http://jsfiddle.net/mickeyvip/cctaV/3/
> not working

magikMaker

unread,
Oct 25, 2011, 8:38:45 AM10/25/11
to KnockoutJS
You can convert your Boolean value to a String from within the
databinding like this:

data-bind="checked: GeneratePolicyNumber().toString()"

See the this fiddle:
http://jsfiddle.net/magikMaker/gbR5X/

graham...@gmail.com

unread,
Feb 15, 2013, 12:59:21 AM2/15/13
to knock...@googlegroups.com
magikMaker, your jsfiddle is now broken, how can we bind radio buttons to booleans?
Reply all
Reply to author
Forward
0 new messages