Magento 2 shipping method radio button not display selected on checkout

Question

I have customized the checkout step to make one step checkout. everything is working fine but when I click on select shipping method radio button functionality is working but radio button not display selected. but when i click on radio button label Eg: Flat Rate radio button will display selected.

I didn't understand what is wrong when clicking on radio button not display selected but click on radio button label display as selected.

Below is my .html overridden file which is responsible for shipping method HTML render. can anyone help to short out this issue?

<tr class="row" data-bind="click: $parent.selectShippingMethod.bind($parent)">
    <td class="col col-method">
        <!-- ko ifnot: method.error_message -->
        <!-- ko if: $parent.rates().length == 1 -->
        <input class="radio"
               type="radio"
               data-bind="attr: {
                            checked: $parent.rates().length == 1,
                            'value' : method.carrier_code + '_' + method.method_code,
                            'id': 's_method_' + method.method_code,
                            'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code
                         }" />
        <label class="label"><span data-bind=""></span></label>
        <!-- /ko -->
        <!--ko ifnot: ($parent.rates().length == 1)-->
        <input type="radio"
               data-bind="
                        value: method.carrier_code + '_' + method.method_code,
                        checked: $parent.isSelected,
                        attr: {
                            'id': 's_method_' + method.carrier_code + '_' + method.method_code,
                            'aria-labelledby': 'label_method_' + method.method_code + '_' + method.carrier_code + ' ' + 'label_carrier_' + method.method_code + '_' + method.carrier_code
                        },
                        click: $parent.selectShippingMethod"
               class="radio"/>
               <label class="label"><span data-bind=""></span></label>
        <!--/ko-->
        <!-- /ko -->
    </td>
    <td class="col col-price">
        <span class="price" data-bind="text: $parent.formatPrice(method.amount)"></span>
        <!-- ko foreach: $parent.getRegion('price') -->
        <!-- ko template: getTemplate() --><!-- /ko -->
        <!-- /ko -->
    </td>

    <td class="col col-method"
            data-bind="text: method.method_title, attr: {'id': 'label_method_' + method.method_code + '_' + method.carrier_code}"></td>

    <td class="col col-carrier"
            data-bind="text: method.carrier_title, attr: {'id': 'label_carrier_' + method.method_code + '_' + method.carrier_code}"></td>
</tr>

Any help would be appreciated!

Answer 1

Thanks to @nemesv.

There is an issue in Ajax when i select shipping method i called ajax setShippingInformation so in a knockout case of ajax By default, Knockout will prevent the click event from taking any default action.

if you do want to let the default click action proceed, just return true from your click handler function.

See the detailed answer from here: knockout js radio button click event reset selection