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

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

演示该技术的 JSFiddle。

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

试试这个