Разрешить только один выбор для каждого столбца и строки в сетке веб-страницы переключателей
У меня есть сетка переключателей 5x5, каждая из которых является "группой" (с тем же именем).
Я хочу сделать так, чтобы, когда выбран A3, B3 C3 D3 и E3 не могут быть выбраны, и, например, если выбран B4, никакая другая кнопка в строке B или столбце 4 не может быть выбрана.
Я попытался использовать несколько имен, но, насколько мое тестирование идет, это не работает. Я попытался найти решение с JQuery, но ничего не работает. Это единственный способ достичь этого, используя немного сложного JavaScript?
Это проще всего сделать, добавив классы для каждого переключателя, один для столбца и один для строки. Когда переключатель установлен, все, что нужно сделать, это отключить тех, у кого есть один соответствующий класс (т.е. совпадающая строка или столбец).
$('input[type="radio"]').change(function() {
var classes = $(this).prop('class').split(' ');
for (i in classes)
$('.'+classes[i]).attr('disabled', true);
});
Строки обрабатываются автоматически, если они имеют одинаковое имя. Отключение других радио-кнопок не позволяет вам передумать. Я бы подумал о том, что мы не будем реагировать на конфликтующие радиолюбители.
$(".radiobutton").on("change", function(ev) {
var clicked = $(ev.target);
$(".radiobutton[data-col=" + clicked.data("col") + "]").attr("checked", false);
clicked.attr("checked", true);
});
