Wyłączanie usługi Twitter Bootstrap Button Group

Mam grupę przycisków na stronie, która jest używana do wyboru. Po dokonaniu wyboru chcę, aby grupa przycisków była nadal widoczna, aby użytkownik mógł zobaczyć dokonany wybór, ale nie chcę, aby mogli już z niego korzystać. Czy istnieje sposób wyłączenia grupy przycisków?Wyłączanie usługi Twitter Bootstrap Button Group

<div class="btn-group-vertical"> 
    <button type="button" class="btn btn-primary btn-lg">Option 1</button> 
    <button type="button" class="btn btn-primary btn-lg">Option 2</button> 
    <button type="button" class="btn btn-primary btn-lg">Option 3</button> 
</div>

Źródło

2014-05-07 thraxst

Możesz to zrobić za pomocą javascript lub jquery, ale jestem ciekaw dlaczego? Co zrobić, jeśli ludzie zmieniają zdanie i chcą wybrać inny? – Godinall

@Godinall Czy możesz podać przykład, jak to zrobić za pomocą javascript lub jquery? Czy nie można tego zrobić za pomocą narzędzi bootstrap? Może to być przydatne, jeśli chcesz tworzyć formularze tylko do odczytu. – Baurzhan

Możesz użyć atrybutu wyłączonego na przyciskach, aby wyłączyć ich używanie, as described in the Bootstrap docs. Zasadniczo polega to na dodaniu do elementu przycisku atrybutu "wyłączony";

<div class="btn-group-vertical"> 
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 1</button> 
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 2</button> 
    <button type="button" class="btn btn-primary btn-lg" disabled="disabled">Option 3</button> 
</div>

Można użyć jQuery dynamicznie dodać ten atrybut raz zrobiłeś cokolwiek chcesz zrobić

$('.btn-group-vertical button').attr('disabled','disabled');

A jeśli chce ponownie włączyć to

$('.btn-group-vertical button').removeAttr('disabled');

Miś biorąc pod uwagę, że powyższe byłoby zastosowanie tego zachowania do wszystkich grup przycisków o tej nazwie klasy. Jeśli tego nie chcesz, musisz dodać identyfikator do elementu div grupy btn i użyć go w selektorze jQuery.

Źródło

2014-05-07 12:59:38

Spowoduje to wyłączenie przycisków, ale szukam sposobu na zachowanie stylizacji, aby użytkownik mógł zobaczyć przycisk, który wybrał. – thraxst

@thraxst czy kiedykolwiek znalazłeś rozwiązanie tego problemu? Ponieważ szukam tego samego. – Chud37

@ Chud37 and thraxst Spróbuj dodać to do swojego css: .btn-primary.active [disabled] {background-color: # e6e6e6! Important; } – THelper

Chciałem zachować stylistykę też, więc wyszedłem na zewnątrz boiska niepełnosprawnej i właśnie przeciw-działał CSS z nową klasą display-only:

<div class='btn-group display-only' data-toggle='buttons'>  
    <label class='btn btn-default button-array'>Friday PM</label> 
    <label class='btn btn-default button-array'>Saturday AM</label> 
    <label class='btn btn-default button-array'>Graduation</label> 
    <label class='btn btn-default button-array'>Saturday PM</label> 
    <label class='btn btn-default button-array'>Sunday AM</label> 
    <label class='btn btn-default button-array'>Sunday PM</label> 
    <label class='btn btn-default button-array'>Monday AM</label> 
</div>

a CSS:

.btn-group.display-only label.btn { 
    pointer-events: none; 
    cursor: not-allowed; 
} 
.btn-group.display-only label.btn.active { 
    opacity: 1; 
    color: #333; 
    background-color: #e6e6e6; 
    border-color: #adadad;webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
    box-shadow: inset 0 3px 5px rgba(0,0,0,.125); 
}

..Seems działa dobrze dla mnie.

Źródło

2015-11-26 10:36:46 Chud37

Wyłączanie usługi Twitter Bootstrap Button Group

Odpowiedz

Powiązane problemy