web-dev-qa-db-fra.com

Activer / désactiver l'attribut désactivé à l'aide de jQuery

Voici mon code:

$("#product1 :checkbox").click(function(){
    $(this)
        .closest('tr') // Find the parent row.
            .find(":input[type='text']") // Find text elements in that row.
                .attr('disabled',false).toggleClass('disabled') // Enable them.
                .end() // Go back to the row.
            .siblings() // Get its siblings
                .find(":input[type='text']") // Find text elements in those rows.
                .attr('disabled',true).removeClass('disabled'); // Disable them.
});

Comment permuter .attr('disabled',false);?

Je n'arrive pas à le trouver sur Google.

jquerytoggleattr
176
Tommy Arnold
$('#el').prop('disabled', function(i, v) { return !v; });

La méthode .prop() accepte deux arguments:

  • Propriété name (désactivé, coché, sélectionné) tout ce qui est vrai ou faux
  • Propriété valeur , peut être:
    • ( vide ) - renvoie la valeur actuelle.
    • boolean (true/false) - définit la valeur de la propriété.
    • function - Est exécuté pour chaque élément trouvé, la valeur renvoyée est utilisée pour définir la propriété. Il y a deux arguments passés; le premier argument est l'indice (0, 1, 2, augmente pour chaque élément trouvé). Le deuxième argument est la valeur actuelle de l'élément (true/false).

Donc, dans ce cas, j'ai utilisé une fonction qui m'a fourni l'index (i) et la valeur actuelle (v), puis j'ai renvoyé le contraire de la valeur actuelle, de sorte que l'état de la propriété est inversé.

413
Arne

Je devine pour obtenir une comparabilité complète du navigateur disabled devrait être défini par la valeur disabled ou être supprimé!
Voici un petit plugin que je viens de créer:

(function($) {
    $.fn.toggleDisabled = function() {
        return this.each(function() {
            var $this = $(this);
            if ($this.attr('disabled')) $this.removeAttr('disabled');
            else $this.attr('disabled', 'disabled');
        });
    };
})(jQuery);

Exemple de lien .

EDIT: a mis à jour l'exemple de lien/code afin de maintenir la possibilité de chaînage!
EDIT 2:
Basé sur le commentaire @lonesomeday, voici une version améliorée:

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);
101
ifaour
 
 $ ('# case à cocher'). click (function () {
 $ ('# submit'). attr ('disabled',! $ (this) .attr ('vérifié'));
    });
19
Присяжный Дмитрий

Une autre option simple qui met à jour sur un clic de la case à cocher.

HTML:

<input type="checkbox" id="checkbox/>
<input disabled type="submit" id="item"/>

jQuery:

$('#checkbox').click(function() {
    if (this.checked) {
        $('#item').prop('disabled', false); // If checked enable item       
    } else {
        $('#item').prop('disabled', true); // If checked disable item                   
    }
});

En action: lien

2
Jeroen Goedhart

Un bon moment plus tard, et grâce à @arne, j'ai créé cette petite fonction similaire pour gérer où l'entrée devrait être désactivée ET masquée, ou activée ET affichée:

function toggleInputState(el, on) {
  // 'on' = true(visible) or false(hidden)
  // If a field is to be shown, enable it; if hidden, disable it.
  // Disabling will prevent the field's value from being submitted
  $(el).prop('disabled', !on).toggle(on);
}

Ensuite, un objet jQuery (tel que $ ('input [name = "quelque chose"]')) est simplement commuté en utilisant:

toggleInputState(myElement, myBoolean)
2
eon

Ceci est assez simple avec la syntaxe de rappel de attr :

$("#product1 :checkbox").click(function(){
  $(this)
   .closest('tr') // find the parent row
       .find(":input[type='text']") // find text elements in that row
           .attr('disabled',function(idx, oldAttr) {
               return !oldAttr; // invert disabled value
           })
           .toggleClass('disabled') // enable them
       .end() // go back to the row
       .siblings() // get its siblings
           .find(":input[type='text']") // find text elements in those rows
               .attr('disabled',function(idx, oldAttr) {
                   return !oldAttr; // invert disabled value
               })
               .removeClass('disabled'); // disable them
});
1
lonesomeday