knockoutJS binding doesn't work if data-toggle=buttons used in bootstrap for radio button

0
votes

I am using knockout binding for radio button with bootstrap.

<div class="btn-group" data-toggle="buttons">
            <label class="btn btn-default">
                <input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="true" name="daysradio" >{{texts.showAll}}
            </label>
            <label class="btn btn-default">
                <input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="30" name="daysradio" >{{texts.showOnly30Days}}
            </label>
            <label class="btn btn-default">
                <input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="60" name="daysradio" >{{texts.showOnly60Days}}
            </label>
            <label class="btn btn-default">
                <input class="radio-inline" type="radio" data-bind="checked:daysBackParameter" value="90" name="daysradio" >{{texts.showOnly90Days}}
            </label>
            <!--
            <label class="btn btn-default">
                <span style="cursor:pointer" data-bind="click: function(){ filterClick(30) } ,css: { 'selectedFilter' : filterValue == 30 }"><u>30 </u></span>&nbsp;
            </label>
            -->
    </div>

the probelm is when i use data-toggle=buttons then data-bind is not working but if i remove this then data-binding works. but in that case radio button style comes but i need button styles. Could you please suggest any solution?

want first one not the second one, second one pass the value but first one donot

1
javascriptjqueryhtmltwitter-bootstrapknockout.js
You need custom binding handlers if you're going to share control of the DOM. See jsfiddle.net/ervwalter/ccjnj – Roy J

1 Answers

0
votes

I used the mentioned custom binding and it worked for me. The deatails custom binding will be found on this custom biding by Roy J

<div class="btn-group" data-bind="radio: userType">
                                        <button type="button" class="btn btn-primary" data-value="company">Main User</button>
                                        <button type="button" class="btn btn-primary" data-value="person">Dummy user</button>