Блокировка радио кнопки при выборе(

@ГеоргийТ · Регистрация: 06.08.2018

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

граждане прогеры, памагите. есть группа радио кнопок. я не могу сделать так, чтобы при выборе одной из них. блокировались все остальные. в инете искал, там всякая параша одна. при выборе в группе радио кнопок по нажатию стрелки еще смещает(((((((

@amr-now · 17.01.2020, 14:06

Здравствуйте.
Оно?

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input type="radio" name="r1" value="1">
    <input type="radio" name="r1" value="2">
    <input type="radio" name="r1" value="3">
    <script>
        var radios = document.getElementsByName("r1");
        for (var i = 0; i < radios.length; i++)
            radios[i].onchange = r1_change;
 
        function r1_change() {
            for (var i = 0; i < radios.length; i++)
                if (this !== radios[i])
                    radios[i].disabled = true;
        }
    </script>
</body>
</html>

@j2FunOnly · 17.01.2020, 14:06

Общая идея: вешаете обработчик события change на элемент, содержащий радио кнопки. В обработчике находите все радио кнопки, каждую сверяете с той, которую изменили и ставите атрибут disabled.

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="select-once">
  <label>
    <input type="radio" name="my_radio" value="1">one
  </label>
  <label>
    <input type="radio" name="my_radio" value="2">two
  </label>
  <label>
    <input type="radio" name="my_radio" value="3">three
  </label>
</div>
<script>
  document.querySelector('.select-once').addEventListener('change', function(e) {
    var inputs = this.querySelectorAll('input[type=radio]');
 
    for (var i = 0; i < inputs.length; i++) {
      if (e.target === inputs[i]) continue;
 
      inputs[i].disabled = true;
    }
  });
 
</script>

@ГеоргийТ · 17.01.2020, 15:13 **[ТС]**

работает с одним блоком радиокнопок, а как делать, если у меня несколько блоков с группой радиокнопок?

Добавлено через 1 минуту
или просто сделать чтобы блокировал тот который выбран, у меня просто баг когда я стрелку вниз или вверх нажимаю он переключается на другиие радиокнопки из группы

Добавлено через 17 минут
Помогите(((

@amr-now · 17.01.2020, 16:11

ГеоргийТ, сформулируйте нормально задачу и покажите разметку HTML для этой задачи.

Бесконечно придумывать новые вопросы - нечестно.

@ГеоргийТ · 17.01.2020, 16:20 **[ТС]**

хорошо. у меня есть блок в котором выводится группа радиокнопок. и таких блоков может быть несколько + такие блоки выводятся из бд и для каждой группы радиокнопок в блоке атрибут name разный (чтоб при переключении не перескакивал на радиокнопки других блоков (также это баг)) мне нужно, чтобы при выборе одной из радиокнопок все остальные были не активны, но не так чтобы все сразу, а чтобы по блочно. код который написали конечно работает и спасибо им за это. но он работает только на один блок. а мне нужно чтоб для всех

@amr-now · 17.01.2020, 16:25

Сообщение от ГеоргийТ

у меня есть блок в котором выводится группа радиокнопок.

Покажите нормально.

Добавлено через 1 минуту

Сообщение от ГеоргийТ

для каждой группы радиокнопок в блоке атрибут name разный (чтоб при переключении не перескакивал на радиокнопки других блоков (также это баг))

Это не баг.
Группой считаются все радиокнопки на странице с одинаковым именем.

Добавлено через 3 минуты

Сообщение от ГеоргийТ

он работает только на один блок. а мне нужно чтоб для всех

Нужно, чтобы абсолютно все ненажатые радиокнопки на странице заблокировались? Со всеми именами сразу?

@ГеоргийТ · 17.01.2020, 16:31 **[ТС]**

Сообщение от amr-now

Это не баг.
Группой считаются все радиокнопки на странице с одинаковым именем.

баг в том, что у меня на каждый блок, name разный, а когда нажимаю на какую нибудь радиокнопку в одном из блоков, то блокируются не те, что в этом блоке, а все абсолютно и это из за того что находит он не по name а типу радиокнопка все сразу, я думал может по name их надо как то делать

Добавлено через 3 минуты

Сообщение от amr-now

Нужно, чтобы абсолютно все ненажатые радиокнопки на странице заблокировались? Со всеми именами сразу?

нужно чтобы блокировались ненажатые радиокнопки в блоке. пример: есть 2 блока по 2 радиокнопки. я нажал на радиокнопку в первом блоке, и надо чтоб блокировалась вторая радиокнопка в этом же блоке, а не все

@amr-now · 17.01.2020, 16:41

Сообщение от ГеоргийТ

есть 2 блока по 2 радиокнопки. я нажал на радиокнопку в первом блоке, и надо чтоб блокировалась вторая радиокнопка в этом же блоке, а не все

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input type="radio" name="r1" value="1">
    <input type="radio" name="r1" value="2">
    <br /><br />
    <input type="radio" name="r2" value="1">
    <input type="radio" name="r2" value="2">
    <script>
        var radios1 = document.getElementsByName("r1");
        for (var i = 0; i < radios1.length; i++)
            radios1[i].onchange = r_change;
 
        var radios2 = document.getElementsByName("r2");
        for (var i = 0; i < radios2.length; i++)
            radios2[i].onchange = r_change;
 
        function r_change() {
            var radios = document.getElementsByName(this.name);
            for (var i = 0; i < radios.length; i++)
                if (this !== radios[i])
                    radios[i].disabled = true;
        }
    </script>
</body>
</html>

@ГеоргийТ · 17.01.2020, 16:43 **[ТС]**

это был пример(( нужно не конкретно под 2 блока, а на каждый. их может быть и больше. и наверное чтобы так сделать, нужно вычислять name каждой группы

@amr-now · 17.01.2020, 16:55

ГеоргийТ, абсолютно все радиокнопки на странице обладают поведением, что при нажатии остальные радиокнопки с тем же именем блокируются?
Нет на странице радиокнопок с другим поведением?

Если все радиокнопки на странице обладают одинаковым поведением. то так:

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
</head>
<body>
    <input type="radio" name="r1" value="1">
    <input type="radio" name="r1" value="2">
    <br /><br />
    <input type="radio" name="r2" value="1">
    <input type="radio" name="r2" value="2">
    <script>
        var radios1 = document.querySelectorAll("input[type=radio]");
        for (var i = 0; i < radios1.length; i++)
            radios1[i].onchange = r_change;
 
        function r_change() {
            var radios = document.getElementsByName(this.name);
            for (var i = 0; i < radios.length; i++)
                if (this !== radios[i])
                    radios[i].disabled = true;
        }
    </script>
</body>
</html>

Добавлено через 4 минуты
Кстати, прекрасный селектор радиокнопок с указанным поведением. На странице могут присутствовать и радиокнопки с другим поведением тоже.

JavaScript
1
var radios1 = document.querySelectorAll(".r_change");

где r_change - класс, который навешиваем на кнопки с правильным поведением.

@fixeri · 17.01.2020, 17:26

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .block { border: 1px solid black; }
    </style>
</head>
<body>
    <div class="wrapper__blocks">
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
 
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
 
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
 
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
 
        
    </div>
 
    <script type="text/javascript">
        "use strict";
 
        document.getElementsByClassName("wrapper__blocks")[0].addEventListener("change", (e) => {
            let el = e.target;
            if (el.nextElementSibling) el.nextElementSibling.disabled = true;
            else el.previousElementSibling.disabled = true;
        });
    </script>
</body>
</html>

Добавлено через 20 минут

PHP/HTML
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
<!DOCTYPE html>
<html>
<head>
    <title></title>
    <style type="text/css">
        .block { border: 1px solid black; }
    </style>
</head>
<body>
    <div class="wrapper__blocks">
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
 
        <div class="block">
            <input type="radio">
            <input type="radio">
            <input type="radio">
            <input type="radio">
            <input type="radio">
        </div>
 
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
 
        <div class="block">
            <input type="radio">
            <input type="radio">
        </div>
    </div>
 
    <script type="text/javascript">
        "use strict";
 
        document.getElementsByClassName("wrapper__blocks")[0].addEventListener("change", (e) => {
            let el = e.target;
            el.classList.add("disabledb");
            let otherRadBtns = el.parentNode.querySelectorAll("input:not(.disabledb)");
            for (let i = 0; i < otherRadBtns.length; i ++) otherRadBtns[i].disabled = true;
        });
    </script>
</body>
</html>

@ГеоргийТ · 17.01.2020, 19:12 **[ТС]**

Сообщение от amr-now

абсолютно все радиокнопки на странице обладают поведением, что при нажатии остальные радиокнопки с тем же именем блокируются?

так должно быть, да

Добавлено через 16 минут
вот такая у меня разметка

PHP/HTML
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
<div class="block_tests">
                        <div class="question">
                            <h2><?php echo $itog['title'];?></h2>
                        </div>
                        <div class="answer">    
                                <div class="inputs">
                                    <input type="radio" name="<?php echo $itog['id'];?>"  value="<?php echo $itog['answer_values1'];?>" />
                                    <span><?php echo $itog['option1'];?></span>
                                </div>
                                <div class="inputs">
                                    <input type="radio" name="<?php echo $itog['id'];?>"  value="<?php echo $itog['answer_values2'];?>" />
                                    <span><?php echo $itog['option2'];?></span>
                                </div>
                                <div class="inputs">
                                    <input type="radio" name="<?php echo $itog['id'];?>"  value="<?php echo $itog['answer_values3'];?>" />
                                    <span><?php echo $itog['option3'];?></span>
                                </div>
                                <div class="inputs">
                                    <input type="radio" name="<?php echo $itog['id'];?>"  value="<?php echo $itog['answer_values4'];?>" />
                                    <span><?php echo $itog['option4'];?></span>
                                </div>
                                <div class="inputs">
                                    <input type="radio" name="<?php echo $itog['id'];?>"  value="<?php echo $itog['answer_values5'];?>" />
                                    <span><?php echo $itog['option5'];?></span>
                                </div>  
                        </div>
                    </div>

@ГеоргийТ · 18.01.2020, 01:49 **[ТС]**

сработало,,,,,,,,,,,,, гениально,,, спасиииибоооооооооооооо!!!!!!

Новые блоги и статьи Все статьи Все блоги /
Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .	Уведомление о неверно выбранном значении справочника Maks 06.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "НарядПутевка", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если в документе выбран неверный склад. . .	Установка Qt Creator для C и C++: ставим среду, CMake и MinGW без фреймворка Qt 8Observer8 05.04.2026 Среду разработки Qt Creator можно установить без фреймворка Qt. Есть отдельный репозиторий для этой среды: https:/ / github. com/ qt-creator/ qt-creator, где можно скачать установщик, на вкладке Releases:. . .	AkelPad-скрипты, структуры, и немного лирики.. testuser2 05.04.2026 Такая программа, как AkelPad существует уже давно, и также давно существуют скрипты под нее. Тем не менее, прога живет, периодически что-то не спеша дополняется, улучшается. Что меня в первую очередь. . .
Отображение реквизитов в документе по условию и контроль их заполнения Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "ПланированиеСпецтехники", разработанного в конфигурации КА2. Данный документ берёт данные из другого нетипового документа. . .	Фото всей Земли с борта корабля Orion миссии Artemis II kumehtar 04.04.2026 Это первое подобное фото сделанное человеком за 50 лет. Снимок называют новым вариантом легендарной фотографии «The Blue Marble» 1972 года, сделанной с борта корабля «Аполлон-17». Новое фото. . .	Вывод диалогового окна перед закрытием, если документ не проведён Maks 04.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: реализовать программный контроль на предмет проведения документа. . .	Программный контроль заполнения реквизитов табличной части документа Maks 02.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: 1. Реализовать контроль заполнения реквизита. . .

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212

	Блокировка радио кнопки при выборе( 17.01.2020, 13:49. Показов 6198. Ответов 13 Метки нет (Все метки) граждане прогеры, памагите. есть группа радио кнопок. я не могу сделать так, чтобы при выборе одной из них. блокировались все остальные. в инете искал, там всякая параша одна. при выборе в группе радио кнопок по нажатию стрелки еще смещает((((((( 1

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	17.01.2020, 15:13 [ТС]
	работает с одним блоком радиокнопок, а как делать, если у меня несколько блоков с группой радиокнопок? Добавлено через 1 минуту или просто сделать чтобы блокировал тот который выбран, у меня просто баг когда я стрелку вниз или вверх нажимаю он переключается на другиие радиокнопки из группы Добавлено через 17 минут Помогите((( 0

@amr-now 6497 / 3908 / 2006 Регистрация: 14.06.2018 Сообщений: 6,781
	17.01.2020, 16:11
	ГеоргийТ, сформулируйте нормально задачу и покажите разметку HTML для этой задачи. Бесконечно придумывать новые вопросы - нечестно. 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	17.01.2020, 16:20 [ТС]
	хорошо. у меня есть блок в котором выводится группа радиокнопок. и таких блоков может быть несколько + такие блоки выводятся из бд и для каждой группы радиокнопок в блоке атрибут name разный (чтоб при переключении не перескакивал на радиокнопки других блоков (также это баг)) мне нужно, чтобы при выборе одной из радиокнопок все остальные были не активны, но не так чтобы все сразу, а чтобы по блочно. код который написали конечно работает и спасибо им за это. но он работает только на один блок. а мне нужно чтоб для всех 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	17.01.2020, 16:43 [ТС]
	это был пример(( нужно не конкретно под 2 блока, а на каждый. их может быть и больше. и наверное чтобы так сделать, нужно вычислять name каждой группы 0

@ГеоргийТ -2 / 1 / 0 Регистрация: 06.08.2018 Сообщений: 212
	18.01.2020, 01:49 [ТС]
	сработало,,,,,,,,,,,,, гениально,,, спасиииибоооооооооооооо!!!!!! 0

Блокировка радио кнопки при выборе(

Решение