Désactiver l'attribut de l'entrée en utilisant jQuery

Question

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 basculer .attr('disabled',false); ?

Je n'arrive pas à le trouver sur Google.

Answer 1

$('#el').prop('disabled', (i, v) => !v);

En .prop() accepte deux arguments :

• Propriété nom (désactivé, coché, sélectionné) tout ce qui est vrai ou faux
• Propriété valeur peut l'être :
• ( vide ) - renvoie la valeur actuelle.
• booléen (vrai/faux) - définit la valeur de la propriété.
• fonction - Est exécuté pour chaque élément trouvé, la valeur renvoyée est utilisée pour définir la propriété. Deux arguments sont transmis ; le premier argument est la propriété index (0, 1, 2, augmente pour chaque élément trouvé). Le deuxième argument est le valeur de l'élément (vrai/faux).

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

Answer 2

I deviner pour obtenir une comparaison complète des navigateurs disabled doit être fixé par la valeur disabled ou se faire renvoyer !
Voici un petit plugin que je viens de réaliser :

(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 : mise à jour du lien/code de l'exemple pour maintenir la chaînabilité !
EDIT 2 :
Basé sur le commentaire de @lonesomeday, voici une version améliorée :

(function($) {
    $.fn.toggleDisabled = function(){
        return this.each(function(){
            this.disabled = !this.disabled;
        });
    };
})(jQuery);

Answer 3

    $('#checkbox').click(function(){
        $('#submit').attr('disabled', !$(this).attr('checked'));
    });

Answer 4

Une autre option simple qui se met à jour en cliquant sur 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

Answer 5

Un peu plus tard, et grâce à @arne, j'ai créé cette petite fonction similaire pour gérer les cas où l'entrée doit être désactivée ET caché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);
}

Un objet jQuery (tel que $('input[name="something"])) est alors simplement commuté à l'aide d'un objet jQuery :

toggleInputState(myElement, myBoolean)