CODEWITHSUNDEEP
knockout.js
Thomas
Thomas

Reputation: 1563

Radio button not checked after click

I'm trying bind a click event to a radio button using Knockout. However, when the radio button is clicked, it's not saved.

Right now, I'm just returning true from the event. I can see that the event is indeed called. If I try to console.log($parent.SelectedCrossing()) the value is saved. Any ideas?

My markup:

<div class="row">
    <!-- ko foreach: SelectedRoutes -->
    <div class="jumbotron text-center">
        <table class="table table-hover borderless" data-bind="visible: availableRoutes().length">
            <tbody>
                <!-- ko foreach: availableRoutes -->
                <tr>
                    <td>
                        <input type="radio" data-bind="attr: { value: ID() + bkt(), name: $parentContext.$index() + 'optionsRoute', disabled: !IsBookable }, checked: $parent.SelectedCrossing, click: function () { $parents[1].AvailableRouteChosen($parents[0]) }" />
                    </td>
                    <td>
                        <span data-bind="dateTime: TimeOfDeparture"></span>
                    </td>
                    <td>
                        <span data-bind="dateTime: TimeOfArrival"></span>
                    </td>
                </tr>
                <!-- /ko -->
            </tbody>
        </table>
    </div>
    <!-- /ko -->
</div>

The js:

self.AvailableRouteChosen = function (obj) {
    return true;
}

Upvotes: 0

Views: 889

Answers (1)

dfperry
dfperry

Reputation: 2258

your click handler isn't returning anything:

click: function () { $parents[1].AvailableRouteChosen($parents[0]) }

although your underlying function is (and is returning true, which you need to do to override the default click behavior). just return the result:

click: function () { return $parents[1].AvailableRouteChosen($parents[0]) }

Upvotes: 3

Related Questions