web-dev-qa-db-fra.com

Désactiver le bouton radio dans bootstrap 3?

Comment puis-je désactiver les boutons radio Bootstrap 3? Si je commence par l'exemple BS3 et que j'ajoute disabled="disabled" à chaque élément d'entrée, il n'y a aucun changement d'apparence ou de comportement:

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

Démo: JSFiddle .

Je suppose que cela est dû au fait que l'attribut disabled est uniquement appliqué au bouton désormais invisible et non à l'étiquette de texte cliquable, mais je ne vois rien dans la documentation BS3 à ce sujet.

javascripthtmltwitter-bootstrap
12
David Kirkby

Ajoutez la classe disabled à cette étiquette 

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

Voici un demo

19
Dhiraj

Comme mentionné par @giammin dans les commentaires à la réponse acceptée, la définition de 'désactivé' sur les éléments d'entrée ne fonctionne pas dans la version 3.3.6 de bootstrap. (Version actuelle au moment de la publication de cette réponse).

J'avais exactement le même problème et ma solution consistait à utiliser la propriété CSS "pointer events". Cela garantit que l'élément et les enfants ne sont jamais la cible d'événements de clic. Cependant, ce n’est pas une solution infaillible: les utilisateurs peuvent toujours entrer et utiliser l’espace pour cliquer sur les éléments masqués d’un navigateur.

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

Si vous définissez ceci sur votre élément '.btn-group' ', vous désactiverez complètement 

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

La classe '.disabled' est alors facultative. Utilisez-la pour le grisonnement et 'cursor: not-allowed;' propriété.

La discussion sur la solution du correctif se trouve à cette source: https://github.com/twbs/bootstrap/issues/16703

7
ortonomy

Pour les groupes de boutons radio, ajoutez la classe désactivée à celle que vous souhaitez désactiver. Assurez-vous d'avoir quelque chose comme ce code: 

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

Tous vos boutons classés .disabled des groupes de boutons seront également désactivés. Cela fonctionne aussi pour les groupes de boutons de type radio.

4
Ederico Rocha

Vous pouvez utiliser ce qui précède pour désactiver une entrée [type = 'radio'] se trouvant à l'intérieur d'une étiquette (style bootstrap 3),

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

Ce qui précède pour réactiver,

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

Vous pouvez également étendre JQuery et créer une méthode de désactivation factice (pouvant être mise à niveau avec davantage de fonctionnalités), comme ceci:

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

Exemple d'utilisation,

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

Dans bootstrap, si vous souhaitez désactiver n'importe quel type d'entrée ou bouton, il vous suffit d'ajouter la classe .disabled de bootstrap pour que votre bouton soit désactivé.

Comme ça 

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