Dezaktywować przycisk radiowy w bootstrap 3?

Question

Jak mogę wyłączyć przyciski opcji Bootstrap 3? Jeśli zacznę z BS3 example i dodać disabled="disabled" do każdego elementu wejściowego, nie ma żadnych zmian w wyglądzie lub zachowaniu:

<div class="container"> 
<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary active"> 
     <input type="radio" name="options" id="option1" autocomplete="off" checked disabled="disabled">Radio 1 (preselected)</label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option2" autocomplete="off" disabled="disabled">Radio 2</label> 
    <label class="btn btn-primary"> 
     <input type="radio" name="options" id="option3" autocomplete="off" disabled="disabled">Radio 3</label> 
</div> 

Demo: JSFiddle.

Domyślam się, że jest to spowodowane tym, że wyłączony atrybut jest stosowany tylko do przycisku niewidocznego teraz, a nie klikalnej etykiety tekstowej, ale nie widzę niczego w dokumentach BS3 na ten temat.

Answer 1

Dodaj disabled klasę na etykiecie jak ten

<div class="btn-group" data-toggle="buttons"> 
    <label class="btn btn-primary disabled"> 
    <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked) 
    </label> 
    <label class="btn btn-primary active disabled"> 
    <input type="checkbox" autocomplete="off"> Checkbox 2 
    </label> 
    <label class="btn btn-primary disabled"> 
    <input type="checkbox" autocomplete="off"> Checkbox 3 
    </label> 
</div> 

Oto demo

Answer 2

Jak wspomniano przez @giammin w komentarzach do przyjętej odpowiedź, ustawienie „wyłączone” na elementach wejściowych robi” t działa w 3.3.6 bootstrap. (Aktualna wersja w momencie publikacji tej odpowiedzi).

miałem dokładnie ten sam problem, a moje rozwiązanie było użyć właściwości CSS „wskaźnika zdarzeń”. Dzięki temu element i dzieci nigdy nie są celem zdarzeń kliknięcia. Nie jest to jednak niezawodne rozwiązanie - użytkownicy mogą nadal używać tabulatora i używać spacji do klikania ukrytych elementów w przeglądarce na komputerze.

.disabled-group 
{ 
    pointer-events: none; 
} 

Jeśli ustawisz na '.btn grupa' elementu, będziesz całkowicie wyłączyć

<div class="btn-group disabled-group" data-toggle="buttons"> 
    <label class="btn btn-primary disabled"> 
     <input type="checkbox" autocomplete="off"> Checkbox 1 (pre-checked) 
    </label> 
    <label class="btn btn-primary disabled"> 
     <input type="checkbox" autocomplete="off"> Checkbox 2 
    </label> 
    <label class="btn btn-primary disabled"> 
    <input type="checkbox" autocomplete="off"> Checkbox 3 
    </label> 
</div> 

do '.disabled' klasa jest wtedy opcja - wykorzystanie go do wyszarzanie i "kursor: niedozwolony;" własność.

Dyskusja rozwiązania fix jest w tym źródle: https://github.com/twbs/bootstrap/issues/16703

Answer 3

Dla grup przycisków radiowych, dodać klasę wyłączone do jednego chcesz wyłączone. Upewnij się, że coś takiego kodu:

$('.btn-group').on("click", ".disabled", function(event) { 
    event.preventDefault(); 
    return false; 
}); 

To będzie uzyskać wszystkie .disabled sklasyfikowane przyciski wewnątrz grupy przycisków wyłączony także. Działa to również w przypadku grup przycisków typu radia.

Answer 4

W bootstrapie, jeśli chcesz wyłączyć dowolny typ wejścia lub przycisk, musisz tylko dodać klasę bootstrap .disabled, a następnie przycisk zostanie wyłączony.

Jak to

<input type="radio" class="btn btn-primary disabled">Primary Button</button> 

Answer 5

Można użyć powyższego wyłączyć wejście [type = 'radio'], który jest wewnątrz etykiety (Bootstrap 3 style),

$("input[name='INPUT_RADIO_NAME']").prop("disabled", true); 
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "none"); 

powyżej, aby ponownie włączyć,

$("input[name='INPUT_RADIO_NAME']").prop("disabled", false); 
$("input[name='INPUT_RADIO_NAME']").closest("div").css("pointer-events", "auto"); 

Można również rozszerzyć JQuery i utworzyć fałszywą di Metoda sable (które można uaktualnić z większą funkcjonalnością) tak,

(function ($) { 
    $.fn.disableMe = function() { 
     // Validate. 
     if ($.type(this) === "undefined") 
      return false; 

     // Disable only input elements. 
     if ($(this).is("input") || $(this).is("textarea")) { 
      // In case it is a radio inside a label. 
      if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) { 
       $("input[name='safeHtml']").closest("label").addClass("disabled"); 
       $(this).closest("div").css("pointer-events", "none"); 
      } 

      // General input disable. 
      $(this).prop("disabled", true); 
     } 
    }; 
    $.fn.enableMe = function() { 
     // Validate. 
     if ($.type(this) === "undefined") 
      return false; 

     // Enable only input elements. 
     if ($(this).is("input") || $(this).is("textarea")) { 
      // In case it is a radio inside a label. 
      if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) { 
       $("input[name='safeHtml']").closest("label").removeClass("disabled"); 
       $(this).closest("div").css("pointer-events", "auto"); 
      } 

      // General input enable. 
      $(this).prop("disabled", false); 
     } 
    }; 
    $.fn.toggleDisable = function() { 
     if ($.type(this) === "undefined") 
      return false; 

     // Toggle only input elements. 
     if ($(this).is("input") || $(this).is("textarea")) { 
      var isDisabled = $(this).is(":disabled"); 

      // In case it is a radio inside a label. 
      if ($(this).is("[type='radio']") && $(this).parent().is("label.btn")) { 
       $("input[name='safeHtml']").closest("label").toggleClass("disabled"); 
       $(this).closest("div").css("pointer-events", isDisabled ? "auto" : "none"); 
      } 

      // General input enale. 
      $(this).prop("disabled", !isDisabled); 
     } 
    }; 
}(jQuery)); 

Przykład użycia,

$("input[name='INPUT_RADIO_NAME']").disableMe(); 
$("input[name='INPUT_RADIO_NAME']").enableMe(); 
$("input[name='INPUT_RADIO_NAME']").toggleDisable();