如何為數據表中的每一行創建一組單選按鈕？

Question

我正在動態填充數據表中的信息。 我在每一行添加了兩個單選按鈕，用於選擇是和否。 我無法一次在每一行上選擇一個單選按鈕，整個表格中只勾選了一個按鈕。

我正在使用單選按鈕作為勾選是或否我正在逐行收集信息並在最后保存。

 let cTraining = {}; cTraining.bindDataTable = function(trainingDataModelDisplay) { $('#traineeProgramsHistoryReassign').dataTable().fnDestroy(); var customError = ""; if (typeof(trainingDataModelDisplay) == "string") { customError = trainingDataModelDisplay; trainingDataModelDisplay = []; } var options = { weekday: 'long', year: 'numeric', month: 'long', day: 'numeric' }; //, hour: 'numeric', minute: 'numeric', second: 'numeric' var programUserTable = $('#traineeProgramsHistoryReassign').dataTable({ "pageLength": 25, scrollX: true, "ordering": false, //"searching": false, "order": [], //Initial no order. language: { paginate: { next: '<i class="fa fa-arrow-right"></i>', // or '→' previous: '<i class="fa fa-arrow-left"></i>', // or '←' }, "emptyTable": "No data available may be because there are no program(s) assigned!!" }, columns: [ { data: 'FLSP_NAME', name: 'FLSP_NAME', title: 'Trainee Name', width: 50 }, { data: 'PROGRAM_NAME', name: 'PROGRAM_NAME', title: 'Program Name', width: 50 }, { data: 'REASSIGN_YES', title: 'Reassign Yes', width: 40, render: function(data, type, full, meta) { if (data == true) { return '<input id="chk1" name="radio1" type = \\"radio\\" checked value="' + data + '">'; } else { return '<input id="chk1" name="radio1" type = \\"radio\\" value="' + data + '">'; } } }, { data: 'REASSIGN_NO', title: 'Reassign No', width: 40, render: function(data, type, full, meta) { if (data == true) { return '<input id="chk2" name="radio1" type = \\"radio\\" checked value="' + data + '">'; } else { return '<input id="chk2" name="radio1" type = \\"radio\\" value="' + data + '">'; } } }, ], rowsGroup: ['FLSP_NAME:name', 'PROGRAM_NAME:name'], data: trainingDataModelDisplay }); $('#traineeProgramsHistoryReassign tbody').on('change', '#chk1', function() { // If checkbox is not checked var data = programUserTable.api().row($(this).parents('tr')).data(); data.REASSIGN_YES = this.checked }); $('#traineeProgramsHistoryReassign tbody').on('change', '#chk2', function() { // If checkbox is not checked var ReassignNoProgUser = {}; var data = programUserTable.api().row($(this).parents('tr')).data(); data.REASSIGN_NO = this.checked }); }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//cdn.datatables.net/1.10.19/js/jquery.dataTables.min.js"></script> <link href="//cdn.datatables.net/1.10.19/css/jquery.dataTables.min.css" rel="stylesheet" />

我想為每一行分組單選按鈕，以便我每次可以選擇一個單選按鈕。

Answer 1

我有同樣的查詢。 這就是我使用@mplungjan 的建議解決它的方法。 希望這能幫助其他處於同樣困境的人。

<table class="table table-striped datatable" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th rowspan="2">Threat</th>
            <th colspan="2">Risk Scale</th>
        </tr>
        <tr>
            <th>Low</th>
            <th>Medium</th>
            <th>High</th>
        </tr>
    </thead>
    <tbody>
        @foreach (var risk in Model)
        {
            <tr>
                <td>@ed.Threat.Name</td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="1"></td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="2"></td>
                <td><input type="radio" name="@ed.Threat.Name" asp-for="@ed.Risk" value="3"></td>
            </tr>
        }
    </tbody>
</table>