网页的单选按钮网格中的每列和每行仅允许一个选择 [英] Allow only one selection per column and row in a webpage's grid of radio buttons

问题描述

我有一个由 5x5 单选按钮组成的网格，每一行都是一个组"(共享相同的名称).

I have a grid of 5x5 radio buttons, with the each row being a "group" (sharing the same name).

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

I want to make it so that when A3 is selected, B3 C3 D3 and E3 can not be selected and for example if B4 is selected no other button in row B or column 4 can be selected.

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

I have tried using multiple names, but as far as my testing goes this doesn't work. I have tried to find a solution with Jquery but nothing seems to work. Is the only way to achieve this using a bit of complex JavaScript?

推荐答案

通过向每个单选按钮添加类(一个用于列，一个用于行)，最容易做到这一点.当检查单选按钮时，需要完成的只是禁用其中一个匹配类(即匹配的行或列).

This is easiest done by adding classes to each radio button, one for column and one for row. As a radio button is checked, all that needs to be done is to disable those with one matching class (i.e. matching row or column).

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

演示该技术的 JSFiddle.

这篇关于网页的单选按钮网格中的每列和每行仅允许一个选择的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！