Сброс стилей Bootstrap 4

@Anna5194 · Регистрация: 25.03.2019

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

есть раскрывающееся окно. при нажатии на одну из кнопок, текст её появляется в поле и сбоку появляется кнопка очистки (1 картинка)
после нажатия на кнопку очистки, сама кнопка исчезает, поле чистится и окно закрывается. НО, елси снова разввернуть окно, то видно, что сама кнопка до сих пор активна (2 картинка)
я хочу, чтобы после очистки полей, кнопки выходили в первоначальное неактивное состояние, как на картинке 3. Как мне это сделать? Потому как для кнопок я использовала Bootstrap 4. код выглядит так

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
<div class="search-block__item" dropdown 
        [ngClass]="{'hideKupit': 'userHideKupit'}" [autoClose]="false">
            <button id="button-autoclose" dropdownToggle type="button" class="btn dropdown-toggle"
                    aria-controls="dropdown-basic">
                {{typeRoom}} 
                <span class="caret"></span>
                    <button id="button-autoclose" type="button"
                        class="btnReset"
                        [ngClass]="{'showReset': clearF}" 
                        (click)="thisCleanForm(false)">
                        <img src="https://img.icons8.com/ios/50/000000/clear-symbol.png">
                    </button>
            </button>
            <div *dropdownMenu class="dropdown-menu">
                <p class="dropdown-menu__title">Выберите тип:</p>
                <div class="btn-group btn-group-toggle" ngbRadioGroup name="radioBasic" [(ngModel)]="model">
                    
                    <label ngbButtonLabel class="btn btn--border" (click)=" thisOldBuilding(true)"
                    id="oldBuilding" #oldBuilding
                    (click)="thisCleanForm(true)"
                    >
 
                        <input ngbButton type="radio" [value]="1" 
                        [(ngModel)]="old"> Вторичка
                    </label>
                    <label ngbButtonLabel class="btn btn--border" (click)="thisNewBuilding(true)"
                    id="newBuilding" #newBuilding
                    (click)="thisCleanForm(true)"
                    >
 
                        <input ngbButton type="radio" value="middle" 
                        
                        [(ngModel)]="new"> Новостройка
                    </label>
                    
                </div>
            </div>
        </div>

@novichek_1905 · 23.08.2019, 11:03

Anna5194, вам нужно сбросить их checked. Вы же вы как-то поля очищаете, значит есть событие срабатывание на кнопку, и да код на jquery, так что если нет подключите.

JavaScript
1
2
3
4
5
6
7
8
$(document).ready(function(){
    $(".reset-btn").click(function(){
        $(".check-radio").prop("checked", true);
    });
    $(".uncheck-radio").click(function(){
        $(".radio").prop("checked", false);
    });
});

классы только подставьте свои.

@Anna5194 · 26.08.2019, 14:49 **[ТС]**

сделала по другому без jquery. добавила ngModel, отслеживала true и false и при нажатии на кнопку очистки задавала всем значениям false

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
<button id="button-autoclose" dropdownToggle type="button" ngDefaultControl class="btnReset"
                        aria-controls="dropdown-basic" 
                        (click)="thisReset()"
                        [ngClass]="{'showReset': showR}" 
                        (click)="thisShowReset(false)"
                        [(ngModel)]="reset">
                        <img src="https://img.icons8.com/ios/50/000000/clear-symbol.png">
 
                    <span class="caret"></span>
                </button>
<label class="btn-primary" ngbButtonLabel>
    <input type="checkbox" ngbButton [(ngModel)]="model.right"> Right
  </label>

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
export class NgbdButtonsCheckbox {
  model = {
    left: true,
    middle: false,
    right: false
  };
}
 constructor() { 
 
  }
 
  ngOnInit() {
 
  }
thisReset(){
 
      this.model['left'] = false;
      this.model['middle'] = false;
      this.model['right'] = false;
  
    }

@Anna5194 · 05.09.2019, 11:29 **[ТС]**

Так, короче, самое оказалось элементарное решение для радио-кнопок. Просто весь див помещается в тег form, а к кнопке, которая должна это всё обнулять приписываем

HTML5
1
name="reset_form" value="Reset Form" onclick="this.form.reset();"

работает как надо, без функций и всякой остальной херни. просто идеально. я счастлива) всем спасибо)))

Новые блоги и статьи Все статьи Все блоги /
Автоматическое создание документа при проведении другого документа Maks 29.03.2026 Реализация из решения ниже выполнена на нетиповых документах, разработанных в конфигурации КА2. Есть нетиповой документ "ЗаявкаНаРемонтСпецтехники" и нетиповой документ "ПланированиеСпецтехники". В. . .	Настройка движения справочника по регистру сведений Maks 29.03.2026 Решение ниже реализовано на примере нетипового справочника "ТарифыМобильнойСвязи" разработанного в конфигурации КА2, с целью учета корпоративной мобильной связи в коммерческом предприятии. . . .	Автозаполнение реквизита при выборе элемента справочника Maks 27.03.2026 Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. При выборе "Спецтехники" (Тип Справочник. Спецтехника), заполняется. . .	Сумматор с применением элементов трёх состояний. Hrethgir 26.03.2026 Тут. https:/ / fips. ru/ EGD/ ab3c85c8-836d-4866-871b-c2f0c5d77fbc Первый документ красиво выглядит, но без схемы. Это конечно не даёт никаких плюсов автору, но тем не менее. . . всё может быть. . .
Автозаполнение реквизитов при создании документа Maks 26.03.2026 Программный код из решения ниже размещается в модуле объекта документа, в процедуре "ПриСозданииНаСервере". Алгоритм проверки заполнения реализован для исключения перезаписи значения реквизита,. . .	Команды формы и диалоговое окно Maks 26.03.2026 1. Команда формы "ЗаполнитьЗапчасти". Программный код из решения ниже на примере нетипового документа "ЗаявкаНаРемонтСпецтехники" разработанного в конфигурации КА2. В качестве источника данных. . .	Кому нужен AOT? DevAlt 26.03.2026 Решил сделать простой ланчер Написал заготовку: dotnet new console --aot -o UrlHandler var items = args. Split(":"); var tag = items; var id = items; var executable = args;. . .	Отправка уведомления на почту при создании или изменении элементов справочника Maks 24.03.2026 Программная отправка письма электронной почты на примере типового справочника "Склады" в конфигурации БП3. Перед реализацией необходимо выполнить настройку системной учетной записи электронной. . .