Разрешить только один выбор для каждого столбца и строки в сетке веб-страницы переключателей

75
8

У меня есть сетка переключателей 5x5, каждая из которых является "группой" (с тем же именем).

Я хочу сделать так, чтобы, когда выбран A3, B3 C3 D3 и E3 не могут быть выбраны, и, например, если выбран B4, никакая другая кнопка в строке B или столбце 4 не может быть выбрана.

Я попытался использовать несколько имен, но, насколько мое тестирование идет, это не работает. Я попытался найти решение с JQuery, но ничего не работает. Это единственный способ достичь этого, используя немного сложного JavaScript?

спросил(а) 2021-01-19T13:56:38+03:00 2 месяца, 4 недели назад
1
Решение
75

Это проще всего сделать, добавив классы для каждого переключателя, один для столбца и один для строки. Когда переключатель установлен, все, что нужно сделать, это отключить тех, у кого есть один соответствующий класс (т.е. совпадающая строка или столбец).

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

JSFiddle, демонстрирующий технику.

ответил(а) 2021-01-19T13:56:38+03:00 2 месяца, 4 недели назад
75

Строки обрабатываются автоматически, если они имеют одинаковое имя. Отключение других радио-кнопок не позволяет вам передумать. Я бы подумал о том, что мы не будем реагировать на конфликтующие радиолюбители.

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

Попробуй это

ответил(а) 2021-01-19T13:56:38+03:00 2 месяца, 4 недели назад
Ваш ответ
Введите минимум 50 символов
Чтобы , пожалуйста,
Выберите тему жалобы:

Другая проблема