Laravel - Bootstrap 数据表（yajra）中的单选按钮

Posted 2023-03-14

【中文标题】Laravel - Bootstrap 数据表（yajra）中的单选按钮

【英文标题】：Laravel - Radio button in Bootstrap Datatable (yajra)

【发布时间】：2016-09-25 23:29:25

【问题描述】：

这是我的场景： 我在引导数据表的列中使用单选按钮，包括另一个中的部分视图，部分包含以下代码：

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

并且是通过这种方式使用数据表远程加载添加的：

 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() 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);
            );

选中的单选按钮并未真正选中。

【问题讨论】：

dt.reload() 电话在哪里以及如何进行？听起来你是在客户端javascript中做的。如果是这种情况，您不应该传递一个回调来处理更新已经提供的 html 吗？ Laravel 负责初始渲染，它不知道您在客户端 javascript 中运行的函数。

@JohnnyMagrippis 我更新了添加细节的问题

你能提供一个小提琴吗？

“没有真正检查”是什么意思？属性已设置但未出现选中标记？或者你看到它被选中了但 JS 返回 false？

【参考方案1】：

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

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

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

【讨论】：

我更新了问题并修复了我的代码添加'：checked'

【参考方案2】：

这个问题就是这一行：

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

您引用了 所有 名称为 shipping_address_id 的输入，因此您还检查了 所有 名称为 shipping_address_id 的输入。 p>

如果您只想检查一个输入，那么您可以使用其（唯一）id/类来引用该输入。

如果输入有 id 则使用：

$("input#id-of-your-input").prop("checked", true);

如果输入有一个类，那么使用：

$("input.class-of-your-input").prop("checked", true);

注意：如果另一个元素与该输入具有相同的 className，则该元素也将被检查。

祝你好运，万事如意。