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

Question

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

我想这样做，当选择A3时，不能选择B3 C3 D3和E3，例如，如果选择B4，则不能选择B行或4列中的其他按钮。

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

Answer 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.

Answer 2

如果行具有相同的名称，则会自动处理这些行。 禁用其他单选按钮可以防止您改变主意。我会考虑去除相互冲突的Radiobuttons。

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

Try this