Single Radio Button for all rows

missrebecca84

Hello,

My OtherAddresses data table isn't working as I expect it to. I need help after many hours of troubleshooting.
In the display mode, the radio button is used for us to know which address the user wants to make the primary address (bool Primary). Thus, only one record in the collection may have Primary = true;

~ a single radio button for all of the rows in the table within the display mode. (accomplished with having the same name)
~ when the user edits the row within the modal popup, the checkbox needs to be selected if the data's property of Primary is true.
~ after submitting the change in the edit modal, the value needs to update the data of the other rows to be the opposite.
~When the user clicks the radio button in the display mode, then the underlying data needs to be updated. The display in the edit modal will reflect the change.

What is the jquery combination or the data table configuration in order to do that.

Debug code

debug code: acawip
http://debug.datatables.net/acawip

here is the html.

<div>
            <table id="EditOtherAddresses"></table>
        </div>

What is the jquery combination or the data table configuration in order to do that.

Debug code

debug code: acawip
http://debug.datatables.net/acawip

var otherAddressData = [{"Primary":false,"ID":2},{"Primary":false,"ID":3}];
    var addressEntityColumns = [
                {
                    data: 'ID',
                    className: 'hidden',
                    render: function(data, type, full, meta) {
                        return '<input type="hidden" name="OtherAddresses[' + meta.row + '].ID" value="' + data + '" />';
                    }
                },
                {
                    data: 'Primary',
                    title: 'Make Primary',
                    render: function(data, type, full, meta) {
                        var html = '';
                        if (data.toString() == 'true') {
                            html += '<input type="radio" id="' + full.ID + '" name="Primary" class="singleRadio" value="true" checked="checked">';
                            
                        }
                        else
                        {
                            html += '<input type="radio" id="' + full.ID + '" name="Primary" class="singleRadio" value="false">';
                        }

                        return html += '<input type="hidden" name="OtherAddresses[' + meta.row + '].Primary" value="' + data.toString() + '" />';
                    }
                }

                    ];

~--end configuration of the display~~

~~start configuration of the editor fields ~~

            var addressEditorFields = [
                {
                    label: 'ID',
                    name: 'ID',
                    className: 'hidden',
                    default: '0'
                },
                {
                    label: 'Make Primary',
                    name: 'Primary',
                    data: function(data, type, set) {
                        return data.Primary;
                    },
                    type: 'checkbox',
                    "ipOpts": [{'label': '', 'value': '1' }]
                    }
            ];

~end the editor table fields~

~start the jquery on the web page to try to get things in sync~

``` 
        $(".singleRadio").on("change", function() {
            var currentValue = $(this).prop("checked");
            $(this).prop('value', 'true');
            if (currentValue == true) {
                $(".singleRadio").not(this).removeProp("checked");
                $(".singleRadio").not(this).prop("value", 'false');
            }
            }
        );
        $(".singleRadio").on("click", function() {
            var currentValue = $(this).prop("checked");
            $(this).prop('value', 'true');
            if (currentValue == true) {
                $(".singleRadio").not(this).removeProp("checked");
                $(".singleRadio").not(this).prop("value", 'false');

            }
            }
        );
    });

```

~end of web page html