Radio-Button in Bootstrap 3 deaktivieren?

Question

Wie kann ich die Bootstrap 3-Optionsfelder deaktivieren? Wenn ich mit den BS3 example und füge disabled="disabled" jedes Eingangselement zu starten, gibt es keine Veränderungen im Aussehen oder Verhalten:

<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.

Ich denke, das liegt daran, dass das deaktivierte Attribut nur auf die jetzt unsichtbare Schaltfläche und nicht auf die anklickbare Textbeschriftung angewendet wird, aber ich sehe nichts in den BS3-Dokumenten darüber.

Answer 1

hinzufügen disabled Klasse des Label wie dies

<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> 

Hier ist ein demo

Answer 2

Wie in den Kommentaren die akzeptierten Antwort von @giammin erwähnt, doesn ‚gesperrt‘ auf den Eingabeelement Einstellung‘ t arbeiten in 3.3.6 Bootstrap. (Aktuelle Version zum Zeitpunkt der Veröffentlichung dieser Antwort).

Ich habe genau das gleiche Problem, und meine Lösung war, die CSS-Eigenschaft „Zeiger Ereignisse“ zu verwenden. Dadurch wird sichergestellt, dass das Element und die untergeordneten Elemente niemals Ziel von Klickereignissen sind. Dies ist jedoch keine narrensichere Lösung - Benutzer können weiterhin ein Tab hinzufügen und Speicherplatz verwenden, um auf die ausgeblendeten Elemente in einem Desktop-Browser zu klicken.

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

Wenn Sie diese auf Ihrem .btn-Gruppe "-Element, werden Sie vollständig zu deaktivieren

<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> 

Die '.disabled' Klasse ist dann optional - verwenden Sie es für Ausgrauen und 'Cursor: nicht erlaubt;' Eigentum.

Die Diskussion der Fixier-Lösung ist bei dieser Quelle: https://github.com/twbs/bootstrap/issues/16703

Answer 3

Für Optionsfeld Gruppen, Klasse bis das Sie deaktiviert wollen deaktiviert hinzufügen. Stellen Sie sicher, so etwas wie dieser Code haben:

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

Diese Sie alle .disabled eingestuft werden erhalten Tasten in den Tastengruppen ebenfalls deaktiviert. Dies funktioniert auch für Radio-Buttongruppen.

Answer 4

Wenn Sie im Bootstrap einen beliebigen Eingabetyp oder eine Schaltfläche deaktivieren möchten, müssen Sie nur die Klasse .boundstrap des Bootstrap hinzufügen, dann wird Ihre Schaltfläche deaktiviert.

Gefällt Ihnen dieses

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

Answer 5

Sie die oben können Sie ein input [type = 'Radio'], die in einem Etikett (Bootstrap 3-Stil),

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

Das ist deaktivieren oben, um wieder zu aktivieren,

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

Sie können auch JQuery erweitern und einen Dummy di erstellen Zobel-Methode (die Sie mit mehr Funktionalität aufgewertet werden könnte) wie diese,

(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)); 

Usage Beispiel

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