在网页的单选按钮网格中，每列和每行只允许一个选择答案

【问题标题】：Allow only one selection per column and row in a webpage's grid of radio buttons在网页的单选按钮网格中，每列和每行只允许一个选择
【发布时间】：2014-05-22 11:49:02
【问题描述】：

我有一个由 5x5 单选按钮组成的网格，每一行都是一个“组”（共享相同的名称）。

我想让它在选择 A3 时，不能选择 B3 C3 D3 和 E3，例如，如果选择 B4，则不能选择 B 行或第 4 列中的其他按钮。

我尝试过使用多个名称，但就我的测试而言，这不起作用。我试图用 Jquery 找到解决方案，但似乎没有任何效果。使用一些复杂的 JavaScript 来实现这一点的唯一方法是什么？

【问题讨论】：

显示一些你尝试过的代码并制作一个小提琴......
你能分享你目前拥有的代码，以便我们可以玩它..吗？ JSFiddle 会更好
@aldanux 给你：jsfiddle.net/gLCV3
你会注意到没有 JS 试图尝试这样做，因为正如我在坐下来花费很长时间写之前在问题中所说的那样，我想确保我没有错过更简单的方法
我想，一列的每个收音机都有相同的值，是吗？

标签： javascript jquery html forms radio-button

【解决方案1】：

最简单的方法是为每个单选按钮添加类，一个用于列，一个用于行。选中单选按钮后，只需禁用具有一个匹配类（即匹配行或列）的单选按钮。

$('input[type="radio"]').change(function() {
    var classes = $(this).prop('class').split(' ');
    for (i in classes)
        $('.'+classes[i]).attr('disabled', true);
});

A JSFiddle that demonstrates the technique.

【讨论】：

完美。如果我可以为 JSFiddle +2 我会
请注意，以这种方式限制单选按钮使得在不刷新页面的情况下无法恢复选择。

【解决方案2】：

如果行名称相同，则会自动处理它们。禁用其他单选按钮可防止您改变主意。我会考虑取消选择冲突的单选按钮。

$(".radiobutton").on("change", function(ev) {
    var clicked = $(ev.target);
    $(".radiobutton[data-col=" + clicked.data("col") + "]").attr("checked", false);
    clicked.attr("checked", true);
});

Try this

【讨论】：