Если 2 чекбокса выбраны - сделать остальные неактивными

@bpetruk007 · Регистрация: 29.03.2013

Студворк — интернет-сервис помощи студентам

Здравствуйте. Проблема состоит в следующем:
- на странице есть несколько чекбоксов (в данном случае 4)
- нужно сделать так, чтобы когда пользователь отмечал два, то остальные становились неактивными.

Нашел данное решение. Не мое, но должно работать.
Вопрос состоит в следующем: можно ли как-нибудь автоматизировать этот процесс? Ведь одно дело когда элемента 4, но другое, когда их больше 10.

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
function checkCB()
{
    var c1 = document.getElementById('c1');
    var c2 = document.getElementById('c2');
    var c3 = document.getElementById('c3');
    var c4 = document.getElementById('c4');
    if (c1.checked==true&&c2.checked==true){c3.disabled=true;c4.disabled=true;}
    if (c1.checked==true&&c3.checked==true){c2.disabled=true;c4.disabled=true;}
    if (c1.checked==true&&c4.checked==true){c2.disabled=true;c3.disabled=true;}
    if (c2.checked==true&&c3.checked==true){c1.disabled=true;c4.disabled=true;}
    if (c2.checked==true&&c4.checked==true){c1.disabled=true;c3.disabled=true;}
    if (c3.checked==true&&c4.checked==true){c1.disabled=true;c2.disabled=true;}
}

@kalabuni · 23.01.2015, 21:56

вы почётче задачу сформулируйте, тогда легче будет вам помочь
пусть на странице хоть миллион чекбоксов
их состояние (активен/неактивен) зависит от отмеченности двух каких-то конкретных чекбоксов или же от двух любых из этого миллиона?

@bpetruk007 · 23.01.2015, 22:03 **[ТС]**

kalabuni, любых.
пример 1: на странице есть 10 чекбоксов. пользователь отмечает 1-й и 2-й, остальные (3-10) становятся неактивными.
пример 2: на странице есть 10 чекбоксов. пользователь отмечает 5-й и 10-й, остальные (1-4 и 6-9) становятся неактивными.

@kalabuni · 23.01.2015, 22:46

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<script>
onload = function ()
{
for (var inp = document.getElementsByTagName ('input'), chb = [], j = 0, J = inp.length; j < J; j++)
if (inp [j].type == 'checkbox')
   {
   chb.push (inp [j]); inp [j].onclick = function ()
      {
      for (var j = k = 0, J = chb.length; j < J; j++) {if (chb [j].checked) k++; if (k == 2) {mDis (); break}}
      }
   }
function mDis () {for (var j = k = 0, J = chb.length; j < J; j++) if (!chb [j].checked) chb [j].disabled = 1}
}
</script>
 
<input type="checkbox"><!-- ïåðâûé -->
<input type="checkbox"><!-- âòîðîé -->
<input type="checkbox"><!-- òðåòèé -->
<input type="checkbox"><!-- ÷åòâ¸ðòûé -->
...
<input type="checkbox"><!-- ìèëëèîííûé -->

@Max Dark · 23.01.2015, 22:57

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>test</title>
</head>
<body>
<div id="content">
    <form>
    <input type="checkbox" id="c0"/><label for="c0">0</label>
    <input type="checkbox" id="c1"/><label for="c1">1</label>
    <input type="checkbox" id="c2"/><label for="c2">2</label>
    <input type="checkbox" id="c3"/><label for="c3">3</label>
    <input type="checkbox" id="c4"/><label for="c4">4</label>
    </form>
</div>
<script type="text/javascript">
    window.onload = function() {
        var inp = document.getElementsByTagName('INPUT');
        var chk_boxes = [];
        var cnt = 0;
        for(var ee=0; ee < inp.length; ++ee) {
            var e = inp[ee];
            if(e.type !== 'checkbox') continue;
            chk_boxes.push(e);
            e.addEventListener('change', function(){
                var need = false, state;
                if(this.checked) {
                    ++cnt;
                    need = cnt === 2;
                    state = true;
                }
                else {
                    --cnt;
                    need = cnt === 1;
                    state = false;
                }
                if(need) {
                    chk_boxes.forEach(function(c) {
                        if(!c.checked) {
                            c.disabled = state;
                        }
                    });
                }
            })
        }
    };
</script>
</body>
</html>

@kalabuni · 23.01.2015, 23:21

Cra3y, если уж внедрили в html-код форму с чекбоксами, да ещё вложенную в див, то зачем напрягать браузер лишней работой искать инпуты во всём документе?
почему бы в строке 9 не заменить document на document.getElementById ('content').children [0]?

@Max Dark · 23.01.2015, 23:41

kalabuni, я просто нуб)

Новые блоги и статьи Все статьи Все блоги /
SDL3 для Desktop (MinGW): Рисуем цветные прямоугольники с помощью рисовальщика SDL3 на Си и C++ 8Observer8 17.03.2026 Содержание блога Финальные проекты на Си и на C++: finish-rectangles-sdl3-c. zip finish-rectangles-sdl3-cpp. zip	Символические и жёсткие ссылки в Linux. algri14 15.03.2026 Существует два типа ссылок — символические и жёсткие. Ссылка в Linux — это запись в каталоге, которая может указывать либо на inode «файла-ИСТОЧНИКА», тогда это будет «жёсткая ссылка» (hard link),. . .	[Owen Logic] Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ФедосеевПавел 14.03.2026 Поддержание уровня воды в резервуаре количеством включённых насосов: моделирование и выбор регулятора ВВЕДЕНИЕ Выполняя задание на управление насосной группой заполнения резервуара,. . .	делаю науч статью по влиянию грибов на сукцессию anaschu 13.03.2026 прикрепляю статью
SDL3 для Desktop (MinGW): Создаём пустое окно с нуля для 2D-графики на SDL3, Си и C++ 8Observer8 10.03.2026 Содержание блога Финальные проекты на Си и на C++: hello-sdl3-c. zip hello-sdl3-cpp. zip Результат:	Установка CMake и MinGW 13.1 для сборки С и C++ приложений из консоли и из Qt Creator в EXE 8Observer8 10.03.2026 Содержание блога MinGW - это коллекция инструментов для сборки приложений в EXE. CMake - это система сборки приложений. Здесь описаны базовые шаги для старта программирования с помощью CMake и. . .	Как дизайн сайта влияет на конверсию: 7 решений, которые реально повышают заявки Neotwalker 08.03.2026 Многие до сих пор воспринимают дизайн сайта как “красивую оболочку”. На практике всё иначе: дизайн напрямую влияет на то, оставит человек заявку или уйдёт через несколько секунд. Даже если у вас. . .	Модульная разработка через nuget packages DevAlt 07.03.2026 Сложившийся в . Net-среде способ разработки чаще всего предполагает монорепозиторий в котором находятся все исходники. При создании нового решения, мы просто добавляем нужные проекты и имеем. . .

Если 2 чекбокса выбраны - сделать остальные неактивными

Решение

Решение

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	23.01.2015, 21:56
	вы почётче задачу сформулируйте, тогда легче будет вам помочь пусть на странице хоть миллион чекбоксов их состояние (активен/неактивен) зависит от отмеченности двух каких-то конкретных чекбоксов или же от двух любых из этого миллиона? 0

@bpetruk007 3 / 3 / 4 Регистрация: 29.03.2013 Сообщений: 42
	23.01.2015, 22:03 [ТС]
	kalabuni, любых. пример 1: на странице есть 10 чекбоксов. пользователь отмечает 1-й и 2-й, остальные (3-10) становятся неактивными. пример 2: на странице есть 10 чекбоксов. пользователь отмечает 5-й и 10-й, остальные (1-4 и 6-9) становятся неактивными. 0

@kalabuni супермизантроп 3941 / 2979 / 692 Регистрация: 18.04.2012 Сообщений: 8,629
	23.01.2015, 23:21
	Cra3y, если уж внедрили в html-код форму с чекбоксами, да ещё вложенную в див, то зачем напрягать браузер лишней работой искать инпуты во всём документе? почему бы в строке 9 не заменить document на document.getElementById ('content').children [0]? 0

@Max Dark Диванный эксперт 2550 / 2064 / 971 Регистрация: 09.10.2013 Сообщений: 4,793 Записей в блоге: 4
	23.01.2015, 23:41
	kalabuni, я просто нуб) 0