javascript - Laravel - Bootstrap 数据表 (yajra) 中的单选按钮

Question

这是我的场景: 我在 Bootstrap 数据表的列中使用单选按钮，包括另一个中的部分 View ，部分包含此代码:

<input type="radio" name="shipping_address_id" 
       value="{{$shippingAddress->id}}" {!! $shippingAddress->default?'checked="checked"':''!!} />

并且是通过datatable remote loading方式添加的:

 Datatables::of($addresses)
                    ->addColumn('action', function ($shippingAddress) {
                        return view('admin.shippingaddress.partials.actions_invoice', compact('shippingAddress'))->render();
                    })->make(true);

当 $shippingAddress->default 为 false 时呈现如下:

<input type="radio" name="shipping_address_id" value="8">

当它为真时像这样:

<input type="radio" name="shipping_address_id" value="3" checked="checked" />

但是当我调用 dt.reload() the rdb 时，即使它包含 checked="checked"它也没有真正被检查。

更新

即使我以这种方式初始化数据表:

addressesDataTable = $('#addressesDataTable').DataTable({
                processing: true,
                serverSide: true,
                searchDelay: 1000,
                ajax: {
                    type: 'GET',
                    url: url.replace('idToReplace', $('#buyerSelect').val()),
                    error: function (a, b, c) {
                        console.log(a);
                        console.log(b);
                        console.log(c);
                    },
                    dataSrc: function (response) {
                        return response.data;
                    }
                },
                columns: [
                    {data: 'name', name: 'countries.name'},
                    {data: 'postal', name: 'shipping_addresses.postal'},
                    {data: 'city', name: 'shipping_address.city'},
                    {data: 'address', name: 'shipping_address.address'},
                    {data: 'default', name: 'shipping_address.default'},
                    {data: 'action', name: 'action', orderable: false, searchable: false}
                ]
            });

即使我重新加载表格(我尝试以这种方式使用重新加载回调函数):

addressesDataTable.ajax.reload(function(){
                $('input[name=shipping_address_id]:checked').prop("checked", true);
            });

选中的单选按钮并没有真正选中。

Answer 1

我怀疑你有一个单选按钮数组并且

                $('input[name=shipping_address_id]').prop("checked", true);

正在检查所有这些。当您有多个具有相同名称的单选按钮时，所有这些按钮都被选中，最后一个被选中的按钮显示为已选中，而其他的则没有。您可能需要进行过滤以找到具有正确 ID 的复选框，然后或许可以选中它。